WEB 開發者應該具備的 6 大技能？

2015-11-12 09:24:56

開發前端

WEB開發本身涵蓋了許多領域的許多技術，那么，有哪些是WEB開發者必備的技能呢？這是一個 Quora 上用戶提出的問題，其中Ellyse Taylor的回答獲得了1900+的贊同。

可能很多人對下面這個列表中的大部分內容都已經了解了，但其中必定有一些是你之前沒有看到過，或者沒有完全理解的，甚至有些你可能從來沒聽說過。

WEB 開發者應該有哪些必備的技能？

1. 界面和用戶體驗

注意，瀏覽器的實現標準是不一致的，請確保你的網站能夠兼容所有主流的瀏覽器。最少需要測試的有 Gecko 引擎 (Firefox)，WebKit引擎(Safari以及一些手機瀏覽器)，Chrome，你所要支持的 IE 瀏覽器，以及 Opera。此外，你還需要了解不同系統下，瀏覽器是如何渲染網頁的。
考慮一下人們不使用主流瀏覽器的情況，如手機，屏幕閱讀器和搜索引擎。一些可用的輔助信息：WAI 和 Section508，移動開發：MobiForge。
階段：如何在不影響用戶的情況下部署更新。有一個或多個可以用來改變架構、代碼或全部內容，并確保它們在可控范圍內實現部署的測試或臨時環境。有一種自動化的方式把更新部署到線上網站。最有效的實現方式是結合使用版本控制系統(CVS、Subversion等)和自動構建機制(Ant、NAnt 等)。
不要直接向用戶顯示不友好的錯誤信息。
不要用純文本的方式顯示用戶的電子郵件，因為他們可能會被垃圾郵件煩到死。
為用戶生成的鏈接添加 rel=”nofollow” 屬性，以避免垃圾郵件。
為你的網站建立周全的限制–這條也同時屬于安全方面。
學習如何進一步的提高。
POST 提交成功后進行重定向，以免刷新造成重復提交。
別忘了考慮無障礙訪問。這總是不錯的，在某些情況下，這甚至是法律要求的。 WAI-ARIA 和 WCAG 2 里都有關于這方面很好的資源。
不要讓我思考。

2. 安全

OWASP開發指南幾乎覆蓋了網站安全所有的內容。
了解注入，尤其是 SQL注入，并學會如何阻止它。
永遠不要相信用戶的輸入，以及其他任何請求（包括Cookies和隱藏域的值）。
使用鹽值(salt)哈希密碼，并對不同的行使用不同的鹽值，防止攻擊。使用哈希算法如 bcrypt 或 scrypt(更安全，但比較新)(1, 2)來存儲密碼。(如何安全的存儲密碼)。NIST也允許使用PBKDF2來加密密碼。避免直接使用 MD5 和 SHA 等算法。
不要企圖拿出自己喜歡的認證系統。這是很容易出錯的，并且是不可測的，甚至直到你被攻擊了你才知道。
了解信用卡處理規則。(也可查看該問題)
在登錄頁和任何需要輸入敏感數據的頁面使用SSL/HTTPS。
防止 session 被劫持。
避免跨站腳本(XSS)。
避免點擊劫持。
保持系統更新到最新的補丁。
確保數據庫連接信息的安全。
讓自己了解最新的攻擊技術和會影響你平臺的漏洞。
閱讀谷歌瀏覽器安全手冊。
閱讀WEB應用黑客手冊。
考慮最小特權原則，盡量使用非root用戶運行服務器(以tomcat為例)。

3. 性能

如果有必要的話，實現緩存，請正確理解和使用HTTP緩存。
優化圖片。不要使用20K的圖片作為平鋪背景。
學習如何 gzip/deflate 內容（deflate效果更好）。
合并樣式表與腳本文件以減小瀏覽器鏈接數，同時提高 gzip 的壓縮能力。
瀏覽雅虎性能卓越的網站，以及大量的指南，其中包含提升前端性能和YSlow工具（需要安裝Firefox, Safari, Chrome 或 Opera）。此外，Google page speed(瀏覽器擴展)也是一個性能分析工具，它同時可以優化你的圖片。
對于小的如工具欄圖片，使用CSS Image Sprites(參考最小化HTTP請求)。
訪問量大的網站應該考慮跨域拆分組件。
靜態內容（如圖片、CSS、JavaScript及不需要訪問cookie的內容）應該放在一個單獨的域下，因為域及其子域的每一個請求都會發送cookie。這里是使用內容分發網絡（CDN）的一個很好的選擇。
減少瀏覽器渲染頁面所需的HTTP請求的總數量。
利用Google Closure Compiler及其他壓縮JS的工具。
確保網站根目錄下有一個favicon.ico文件，即使在HTML中并沒有提到它，瀏覽器也會自動加載它。如果你沒有 /favicon.ico ，就會返回很多404錯誤，消耗服務器帶寬。

4. SEO (Search Engine Optimization) 搜索引擎優化

使用“搜索引擎友好”的URL，如 http://example.com/pages/45-article-title 而不是 http://ofexample.com/index.php?page=45。
在動態內容中，把 # 改成 #! ，然后在服務器端使用$_REQUEST["_escaped_fragment_"]。換句話說 ./#!page=1 變成了 ./?_escaped_fragments_=page=1。此外，對于使用 FF.b4 或 Chromium 的用戶，history.pushState({“foo”:“bar”}, “About”, “./?page=1″); 是一個非常棒的命令。因此，即使地址欄已經改變了，頁面也不會刷新。
不要使用“點擊這里”這樣的鏈接。你是在浪費一個搜索引擎優化的機會，而且它讓使用屏幕閱讀器人們更難閱讀。
有一個XML網站地圖，最好在默認位置 /sitemap.xml。
當有多個URL指向同一個內容的時候，使用 <link rel=”canonical” … /> ，這個問題可以通過 Google Webmaster Tools 來解決。
使用 Google Webmaster Tools 和 Bing Webmaster Tools。
安裝 Google Analytics 或者其他開源分析工具如：Piwik。
了解 robots.txt 及搜索引擎蜘蛛是如果工作的。
使用重定向（301）www.example.com 到 example.com(或者反過來)，防止它們平分谷歌網站排名。
要知道有 badly-behaved 蜘蛛的存在。
如果你的網站有非文本內容，Tim Farley 的回答中有一些非常有用的信息。

5. 技術

理解HTTP以及GET、POST、session、cookie以及“無狀態”的意思。
撰寫XHTML/HTML和CSS要遵循W3C規范，并確保它們通過校驗。這樣做的目的是為了避免瀏覽器的怪癖模式，并且這使得非標準瀏覽器如屏幕閱讀器和移動設備更加容易實現。
理解瀏覽器是如何處理JavaScript 的。
理解JavaScript 、樣式表、以及頁面使用的其他資源是如何加載的，并考慮它們對感知性能的影響。現在普遍認同的一種做法是把除分析代碼等以外的腳本文件放在頁面底部。
了解JavaScript 沙箱是如何工作的，特別是當你想使用 iframe 的時候。
需要注意到，JavaScript是可以被禁用的，因此AJAX只是一個擴展，而不是基準。雖然大部分用戶并沒有禁用它，但記住，NoScript正在變得越來越流行。并且，谷歌在索引你的網站時也不會運行JavaScript。
學習 301 和 302 重定向之間的不同。
盡可能多地了解你的部署平臺。
考慮使用 Reset Style Sheet 或 normalize.css。
考慮使用JavaScript框架(如jQuery, MooTools, Prototype, Dojo 或 YUI 3)，這可以避免很多使用JavaScript操作DOM時的差異。
在考慮感知性能和框架的同時，考慮使用服務，如Google Libraries API，來加載框架，這樣瀏覽器可以使用已經緩存的框架而不是從你的網站上下載。
不要重復造輪子。在做任何事情之前，先搜索相關的組件或者實例。99%的可能別人已經實現了并發布出了開源的代碼。
在確定需求之前，盡量不要使用超過20個的庫，這是非常不利的。特別是客戶端WEB，保存輕便、快速、靈活是最重要的。

6. BUG修復

要了解你花費20%的時間寫代碼而花費80%的時間來維護，因此寫代碼時一定注意。
建立一個好的錯誤報告解決方案。
建立一個別人可以提建議和批評的系統。
為未來的支持人員和維護人員建立良好的文檔。
經常備份！Ed Lucas 的回答中有一些建議。有一個恢復策略，而不只是一個備份策略。
使用版本控制系統，如 Subversion、Mercurial 或 Git。
不要忘記驗收測試。Selenium 等框架可以幫到你。
請確保您有足夠的日志記錄的地方，可以使用框架如log4j, log4net 或 log4r。當網站出現問題的時候，你需要能夠找到問題所在。
日志要記錄已處理異常和未處理異常。分析日志輸出，因為它會顯示出你網站的關鍵問題。

這里有些省略的東西并不是因為它們沒用，而是因為它們過于詳細或者超出了范圍，或者說的太遠了。當然，上面的內容可能也有一些遺漏或者錯誤。

責任編輯：王雪燕來源： 9iphp

WEB 開發者技能