Jatinder Mann是微軟Internet Explorer產品的一名專案經理，在BUILD 2012大會上，他做了題為“提高HTML5應用和網站效能的50條秘技（50 performance tricks to make your HTML5 apps and sites faster）”的演講，介紹了很多為Web應用程式提速的技巧。
Mann的建議是按照下面六個原則組織的。
1. 快速響應網路請求。
- 避免重新導向。排名前1000的網站中，63%使用了重新導向。如果不執行重新導向的話，頁面速度可以提高10%。
- 避免Meta-refresh。世界上14%的URL使用了Meta-refresh。
- 儘可能通過CDN定位使用者，使伺服器回應時間最小化。
- 從不同的域下載資源，使並發連線應用程式最大化。
- 複用串連。不要在響應請求時關閉串連。
- 確保頁面載入不會因夥伴網站提供的資料而延遲。
- 瞭解耗時的網路組件，如重新導向、緩衝、DNS、請求和響應等。在IE 9和10中可以使用Navigation Timing API來測量瀏覽器花在每個操作上的時間。
2. 最小化下載的位元組數。
載入頁面時，要盡量減少下載的資料量。平均而言，每個頁面要下載的資料量達777KB，其中有474KB的圖片、128KB的指令碼和84KB的Flash。
- 請求gzip壓縮的內容。
- 將資源儲存在本地的包中，比如為Windows商店應用產生的包資源索引（Package Resource Index）檔案。這樣當需要這些資源時就可以很容易地擷取到。
- 使用HTML5 App Cache緩衝動態資源。App Cache會只下載一次資源，從而避免多次網路行程。當應用的版本號碼發生變化時，它會自動重新下載相應資源。
- 盡量在響應中使用“Expires”欄位來提供可快取的內容。
- 通過設定請求的If-Modified-Since欄位來使用條件請求。
- 快取資料請求，如HTTP、XML和JSON等，因為大約95-96%的請求不會整天變化。雖然這個想法很合理，但實際緩衝接收到的請求的網站所佔比重還不到1%。
- 用大寫將檔案命名標準化。雖然伺服器可能把Icon.jpg當作 icon.jpg，但是對於Web平台而言，它們是不同的資源，對應不同的網路請求。
3. 高效地組織標記。
對於IE而言，請使用最新的標記標準，因為它速度最快。IE 10也能識別早期的IE6-IE9標記風格，但是其速度不如新的標記風格。
- 特定的業務Web應用可能需要強制IE運行於傳統模式，請使用HTTP頭欄位“X-UA-Compatible: IE=EmulateIE7”來代替HTML標籤，這樣速度會快一些。
- 為了平滑地渲染，樣式表應該連結在頁面頂部的<head>之中的<title>後面。
- 絕對不要在頁面底部連結樣式表。否則載入頁面時可能會出現閃爍。
- 對於分層樣式，不要使用“@import”，因為它是同步的，會阻塞CSS資料結構的建立和螢幕繪製。
- 避免樣式的嵌入和內聯，因為它會強制瀏覽器在HTML和CSS解析器之間進行環境切換。
- 僅包含必要的樣式。不要下載和解析用不到的樣式。
- 僅在頁面底部連結JavaScript。這可以確保指令碼執行時圖片和CSS等資源已經載入，無需等待，也避免了環境切換。
- 不要在頁面開頭連結JavaScript。如果某些指令碼必須在開始處載入的話，請使用“defer”屬性。
- 不要內聯JavaScript，這樣可以避免環境切換。
- 使用“async”屬性載入JavaScript，這樣整個指令碼就可以非同步載入和執行。
- 避免冗餘代碼。世界上52%的網頁包含100行甚至更多的冗餘代碼，比如一個JavaScript檔案被連結了兩次。
- 將一個JS架構標準化，無論是jQuery，Dojo，Prototype.js還是其他架構。瀏覽器沒有必要載入多個功能基本相同的架構。
- 不要載入FB和Twitter等網站的指令碼，只是看起來很酷而已，它們會爭用資源。
4. 最佳化多媒體資源的使用。
圖片是最常用的資源，每個頁面平均會下載58張圖片。
- 盡量避免下載太多圖片，根據頁面載入時間將圖片最大數量控制在20-30之間。
- 使用Image Sprites將多個圖片組合成一個。該技術可以減少網路連接數，也會減少下載的位元組數並節省GPU處理周期。
- 手動建立Image Sprites，因為工具建立的可能會留下較大的空洞，這會加大需要下載的資料量，也需要更多的GPU 處理周期。
- 使用PNG格式的圖片，該格式在下載大小、解碼時間、相容性和壓縮率之間實現了完美的折中。JPEG格式可以用於照片。
- 使用原始的映像解析度，這樣可以避免下載不必要的資料以及縮放所需的CPU 處理。
- 儘可能使用CSS3 Gradient替代圖片。
- 儘可能使用CSS3 border radius替代圖片。
- 使用CSS3 Transform來建立移動、旋轉和傾斜效果。
- 對於小型的單個圖片，可以使用Data URI。這樣可以節省一張圖片的下載量。
- 避免複雜的SVG，因為它們會延長下載和處理時間。
- 當包含HTML5時，指定一個預覽圖片。這樣瀏覽器就不必下載整個視頻檔案來確定預覽圖片了。
- 使用HTML5來代替Flash、Silverlight或QuickTime。HTML5速度更快，而且其他幾種形式的運行時外掛程式會消耗系統資源。
- 主動地以非同步方式下載富媒體資源並將其儲存在App Cache中。
5. 編寫快速的JavaScript。
- 在JavaScript中進行數學運算時盡量使用整型。JavaScript的浮點運算比相應的整型運算耗費的時間要多得多。在進行數學運算，特別是計算密集型運算時，請使用Math.floor和Math.ceil將浮點數轉換為整型數。
- 降低JavaScript代碼量，這樣不但可以減少下載的資料量，而且能夠提供更好的運行時效能。
- 按需初始化JS。當需要時動態載入JS。
- 通過緩衝變數（如document和body等）使DOM互動減到最少。
- 使用內建的DOM代碼，如element.firstChild或node.nextSibling等。這些代碼都是高度最佳化的，相對於第三方庫能提供更好的效能。
- 訪問大量DOM元素時，使用querySelectorAll。
- 使用.innerHTML來構建動態網頁面。
- 批量標記更改。
- 維護小巧而健壯的DOM——將其元素數目控制在1000以內。.
- JSON快於XML。
- 使用瀏覽器的JSON原生方法。
- 不要濫用Regex。
6. 知道你的應用在做什麼。
- 理解JavaScript定時器，瞭解setTimeout和clearInterval。除非確定要使用定時器完成一些功能，否則不要啟動定時器。組合定時器也是如此。
- 如果監視器的重新整理率是60Hz，請將顯式幀的定時器調整為16.7 ms。
- 在IE 10、Chrome和Firefox中，圖形處理請使用requestAnimationFrame動畫函數。其繪製通過回調實現，因此不需要定時器。
- 使用可見度API（document.hidden和 Visibilityhange）來確定應用程式的可見狀態，如果頁面是隱藏的，就關閉該活動。這樣可以節省CPU和電池壽命。
Mann建議在IE中使用Windows Performance Tools來測試Web頁面的效能， 並以減少CPU時間和增加並發性為目標進行最佳化。
轉自：http://www.html5cn.org/article-4136-1.html
