構建現代化網站的20個技巧

oschina發表於2013-03-11
網站

　　在過去幾年中，我們與web開發者花了很多時間交流，聽得最多的一件事情就是建立一個能很好的跨越各種型別瀏覽器版本與各種裝置的網站有多麼難。我們為jQuery專案寫程式碼的時候一直有這個問題。因此我們整理了20條編碼模式與經驗，它們是從出席無休止的會議和讀了幾百篇專稿中摘取出來的。我們希望能在你建站的時候給你節省一些時間（和麻煩）。

　跨瀏覽器基礎

　　網站不需要在所有瀏覽器裡渲染得一樣

　　一件普遍被開發者所關心的事情是確保他們的網站在所有瀏覽器中渲染得一樣，包括非現代的一些。那一般並不需要。更好的路線是考慮逐漸增強你的網站，對非現代瀏覽器的使用者提供一個可靠的工作基線，而給用現代瀏覽器的使用者提供一個更豐富的UI。

　　從固體模版開始以簡化開發

　　許多的技巧已經建立進專案模版如HTML5 Boilerplate 以節省你一些時間。這些準則對以現代瀏覽器為目標的專案和需要舊瀏覽器（一直回退到IE6）支援的專案工作得一樣好。

　　關注穩定的標準

　　當一個新又酷的特性出現的時候很容易令人興奮，但其中的一些可能仍然在為技術引數實驗、仍然在開發中。重要的是要記得，在規範發展的早期是很容易變化的，這有可能影響你的網站的穩定性和你的使用者的體驗。通過關注穩定的標準，你可以確保你的使用者能獲得他們期望的體驗，你的網站會更易維護。

　　用IE相容檢測工具幫助你的網站遷移到基於標準的程式碼

　　標準是IE10的一個核心部分，幫助開發者遷移他們的程式碼以便能發揮這項長處，這對IE工程專案組來說無比重要。這就是為什麼他們創造了IE相容檢測工具，它能實時分析你的網站，準確的找到通常問題的型別並給出解決方法。通過在你的程式碼中包括一個簡單的JavaScript指令碼檔案，在你的頁面你就能得到視覺化的結果。它也可以被整合進Fidder HTTP 分析工具。

　　謹慎使用polyfills和shims（模擬標準API）

　　如果你必須在不同瀏覽器實現系統的體驗，polyfills和shims提供了程式碼和標籤，可以幫助模擬標準的API和功能。需要謹記的是，確保你引入的程式碼適合你的需要，並且可以在日後維護。

　　開發時多瀏覽器測試

　　儘管相對以前，現代瀏覽器已經接近統一標準，但還是有不同。偶爾的多瀏覽器測試避免不會在最後一刻發現大問題——甚至已經上線了。確保檢視所有瀏覽器偵錯程式比如IE的F12 Dev Tools，檢查有沒有警告或錯誤資訊。一些老瀏覽器比如IE7沒有內建偵錯程式，可以用Firebug Lite除錯。或者使用跨瀏覽器解決方案如BrowserStack。

　　用工具參與建立過程來檢測錯誤和縮小檔案大小

　　有好一批建立工具如 HTML validators, CSS validators, Uglify,  JSHint, 或者 GruntJS ，他們能找到潛在的問題，增強專案程式碼的標準，減少檔案的大小提升效能。如果你的IDE或者程式碼編輯器支援它們，這些步驟就不會成為絆腳石。例如，Visual Studio提供了在建立過程中執行外部工具和合並/壓縮指令碼檔案的能力。

　HTML

　　總是使用標準模式避免怪癖模式

　　直接用<!DOCTYPE html>吧！現代化網站不需要怪癖模式，不需要考慮90年代中期為了相容現代化的瀏覽器比如IE6和FireFox 2.大多數現今的網頁在怪癖模式下要麼文件宣告無效，要麼出現無關文字。很容易導致佈局異常，而且很難除錯。

　理解有限向後相容的HTML標籤

　　新HTML5標籤比如<section>,<header>和<footer>改善標籤的語義化，但需要特殊的輔助指令碼讓IE6,7和8認識他們。頁面在太舊的瀏覽器或者禁止指令碼時無法使用HTML5標籤，那麼使用<div>標籤是對這些情況比較靠譜的解決方法。

　　將CSS在HTML檔案頂部引入

　　在文件body中引入CSS會導致頁面全空，直到CSS載入後才顯示。CSS檔案應該放在HTML文件的head中，讓瀏覽器儘早地讀取他們。

　　將JS在HTML檔案底部引入

　　瀏覽器會先檢索、解析和執行載入的指令碼，然後渲染剩餘的頁面內容，以防指令碼建立新元素。指令碼在底部後，瀏覽器可以一直渲染頁面直到指令碼載入完全，以便使用者儘快載入頁面顯示出來。

　　避免HTML中指令碼標籤

　　不同於引入指令碼，指令碼標籤需要瀏覽器停止渲染（處理指令碼），阻礙後續資原始檔的分析和下載。這導致頁面初始載入減慢，甚至留下可怕的“空白頁”體驗。而且指令碼分散在內聯標籤裡很難維護。

　　不要在HTML元素中使用內聯指令碼事件

　　例如<button onclick="validate()">Validate</button>。這種做法違反了標籤、表示和行為之間的清爽原則。而且，如果相關的指令碼實在文件底部載入，使用者可能先點選了頁面觸發事件從而嘗試呼叫指令碼程式，但是其實指令碼還沒載入——引發錯誤！

　CSS

　　熟悉和使用CSS級聯規則

　　簡單的id和class選擇器是好用的，但是這也意味著標籤混亂，到處是無法重用的的id和class。應該用標籤，子元素標籤，同列標籤和，小部分的id和class標籤組合，使css更簡單和通用。避免使用“!imporant”。

　　面向未來的使用字首特定屬性

　　新草案制定時，一些瀏覽器廠商會通過新增字首以實現可能支援的標準。為了確保CSS標籤以後可用，帶字首的和標準的屬性名稱都用上最好。這篇文章還提供了一個JavaScript解決方法。

　　用優雅的CSS處理相容性，而不是hack

　　CSS hack隨著瀏覽器的更新，顯得不可靠。解決方法是為html或body標籤新增特定瀏覽器的class，並在css規則中使用。條件註釋也可以在特定瀏覽器版本時使用需要的CSS檔案。

　JavaScript

　　總是將功能探測優先於瀏覽器(navigator.userAgent)探測。

　　判斷是否存在一個特定功能（或錯誤）時，'userAgent'字串是一個糟糕的指標。更嚴重的時，解析userAgent的程式碼時錯誤的。例如，一個瀏覽器探測庫期待主版本號是一個一位數字，所以會把Firefox 15報告為Firefox 1，把IE 10報高為IE 1！更可靠的是直接探測功能或問題，並用它作為程式碼分支決策的標準。我們推薦Modernizr，它是實現功能探測的最簡單方法。

　　儘可能在Ready後立刻執行指令碼

　　技術上如jQuery的$(document).ready()使指令碼在HTML頁面載入完後立即執行，也是指令碼可以安全執行的最早時刻。然而複雜的指令碼會讓頁面顯得遲緩，並阻止使用者立刻操作頁面。所以，一些比如tooltip（提示框）,dialog（對話方塊）在需要顯示時初始化，不造成頁面卡頓。

　　如果Ajax關係使用者互動，越早請求越好

　　Ajax請求會花費很長時間，而且不需要等待HTML頁面渲染就可以發起請求。所以，把$(document).ready()放在Ajax請求完成回撥函式中更好。

　　延遲載入非必要的指令碼（如Facebook Like，Google +1，Twitter）。

　　所有人都希望他們的網頁在社交網路上流行，但是社交網路的指令碼往往很大，可能會引起使用者響應遲緩。在請求這些指令碼前等待頁面載入完畢，可以使頁面響應更快。更妙的是，重新考慮這些按鈕是否有必要，以及它們是否改善了你的頁面整體體驗。

　　英文原文：20 tips for building modern sites

相關文章