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

info.9iphp.com發表於2015-11-09
Web

　　WEB開發本身涵蓋了許多領域的許多技術，那麼，有哪些是WEB開發者必備的技能呢？這是一個 Quora 上使用者提出的問題，其中Ellyse Taylor的回答獲得了1900+的贊同，今天為大家翻譯整理其回答內容，希望大家能夠從中學到一些東西。

　　By Ellyse Taylor：

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

　　1. 介面和使用者體驗

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

　　2. 安全

　　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<wbr>_fragment_"]。換句話說 ./#!page=1 變成了 ./?_escaped_fragments_=pa<wbr>ge=1。此外，對於使用 FF.b4 or Chromium 的使用者，history.pushState({"foo":<wbr>"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。當網站出現問題的時候，你需要能夠找到問題所在。
  • 日誌要記錄已處理異常和未處理異常。分析日誌輸出，因為它會顯示出你網站的關鍵問題。

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

　　via：Quora 翻譯：info.9iphp.com

相關文章