Web前端優化最佳實踐及工具集錦
前端的性能對於一個Web應用來說非常重要，如果一個Web應用的頁面加載速度非常快、對於用戶的操作可以及時響應，那麽產品的用戶體驗將會極大地提升。下圖顯示了頁面加載速度對於用戶體驗的影響。
你的Web頁面的速度是否已經足夠快了？其實可能還有很多可以提升的地方。Google和雅虎也提出了一些Web應用的前端優化建議，並發布了一些工具，你可以逐一檢驗你的Web應用，以便達到更高的性能。
這些優化不僅僅可以給用戶提供更好的體驗，從開發者角度來說，進行優化還可以減少頁面的請求數、降低請求所占的帶寬、減少資源的浪費。
下面來看看Google和雅虎提供的Web頁面優化最佳實踐。
一、Google的Web優化最佳實踐
1. 避免壞請求
有時頁面中的HTML或CSS會向服務器請求一個不存在的資源，比如圖片或HTML文件，這會造成瀏覽器與服務器之間過多的往返請求，類似於：
- 瀏覽器：“我需要這個圖像。”
- 服務器：“我沒有這個圖像。”
- 瀏覽器：“你確定嗎？這個文檔說你有。”
- 服務器：“真的沒有。”
如此一來，會降低頁面的加載速度。因此，檢查頁面中的壞鏈接非常有必要，你可以通過 Google的PageSpeed工具 來檢測，找到問題後，補充相應的資源文件或者修改資源的鏈接地址即可。
2. 避免CSS @import
使用 @import方法引用CSS文件可以能會帶來一些影響頁面加載速度的問題，比如導致文件按順序加載（一個加載完後才會加載另一個），而無法並行加載。
你可以使用 CSS delivery工具 來檢測頁面代碼中是否存在@import方法。比如，如果檢測結果中存在
[css] view plaincopy
- @import url("style.css")
則建議你使用下面的代碼來替代。
[html] view plaincopy
- <link rel="style.css" href="style.css" type="text/css">
3. 避免使用document.write
在JavaScript中，可以使用 document.write在網頁上顯示內容或調用外部資源，而通過此方法，瀏覽器必須采取一些多余的步驟——下載資源、讀取資源、運行JavaScript來了解需要做什麽，調用其他資源時需要重新再執行一次這個過程。由於瀏覽器之前不知道要顯示什麽，所以會降低頁面加載的速度。
要知道，任何能夠被document.write調用的資源，都可以通過HTML來調用，這樣速度會更快。檢查你的頁面代碼，如果存在類似於下面的代碼：
[js] view plaincopy
- document.write(‘<script src="another.js"></script>‘);
建議修改為：
[html] view plaincopy
- <script src="another.js"></script>
4. 合並多個外部CSS文件
在網站中每使用一個CSS文件，都會讓你的頁面加載速度慢一點點。如果你有一個以上的CSS文件，你應該將它們合並為一個文件。
你可以通過 CSS delivery工具 來檢測頁面代碼中的CSS文件，然後通過復制粘貼的方式將它們合並為一個。合並後記得修改頁面中的引用代碼，並刪除舊的引用代碼。
5. 合並多個外部JavaScript文件
大部分情況下，網站往往會包含若幹個 JavaScript文件，但並不需要將這些文件都獨立出來，其中有些是可以合並為一個文件的。
你可以通過 resource check工具 來檢測頁面中所引用的JavaScript文件數，然後可以通過復制粘貼的方式將多個文件合並為一個。
6. 通過CSS sprites來整合圖像
如果頁面中有6個小圖像，那麽瀏覽器在顯示時會分別下載。你可以通過CSS sprites將這些圖像合並成1個，可以減少頁面加載所需的時間。
CSS sprites需要有兩個步驟：整合圖像、定位圖像。比如你可以通過下面的代碼來分別定位下面圖像中的上下兩部分。
[css] view plaincopy
- .megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}
- .smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}
7. 延遲JavaScript的加載
瀏覽器在執行JavaScript代碼時會停止處理頁面，當頁面中有很多JavaScript文件或代碼要加載時，將導致嚴重的延遲。盡管可以使用defer、異步或將JavaScript代碼放到頁面底部來延遲JavaScript的加載，但這些都不是一個好的解決方案。
下面是Google的建議。
[js] view plaincopy
- <script type="text/javascript">
- function downloadJSAtOnload() {
- var element = document.createElement("script");
- element.src = "defer.js";
- document.body.appendChild(element);
- }
- if (window.addEventListener)
- window.addEventListener("load", downloadJSAtOnload, false);
- else if (window.attachEvent)
- window.attachEvent("onload", downloadJSAtOnload);
- else window.onload = downloadJSAtOnload;
- </script>
這段代碼的意思是等待頁面加載完成後，然後再加載外部的“defer.js”文件。下面是測試結果。
8. 啟用壓縮/ GZIP
使用gzip對HTML和CSS文件進行壓縮，通常可以節省大約50％到70％的大小，這樣加載頁面只需要更少的帶寬和更少的時間。
你可以通過這個 Gzip壓縮工具 來檢測頁面是否已經經過Gzip壓縮。
9. 啟用Keep-Alive
HTTP協議采用“請求-應答”模式，當使用普通模式（非KeepAlive模式）時，每個請求/應答客戶和服務器都要新建一個連接，完成之後立即斷開連接（HTTP協議為無連接的協議）；當使用 Keep-Alive模式（又稱持久連接、連接重用）時，Keep-Alive功能使客戶端到服務器端的連接持續有效，當出現對服務器的後繼請求時，Keep-Alive功能避免了建立或者重新建立連接。
在HTTP 1.0中Keep-Alive默認是關閉的，需要在HTTP頭中加入“Connection: Keep-Alive”，才能啟用Keep-Alive；在 HTTP1.1中Keep-Alive默認啟用，加入“Connection: close”可關閉。目前大部分瀏覽器都是用HTTP 1.1協議，也就是說默認都會發起Keep-Alive的連接請求了，所以是否能完成一個完整的Keep- Alive連接就看Web服務器的設置情況。
10. 將小的CSS和JavaScript代碼內嵌到HTML中
如果你的CSS代碼比較小，可以將這部分代碼放到HTML文件中，而不是一個外部CSS文件，這樣可以減少頁面加載所需的文件數，從而加快頁面的加載。同樣，也可以將小的 JavaScript腳本代碼內嵌到HTML文件中。
[html] view plaincopy
- <style type="text/css">
- <!--CSS代碼-->
- </style>
- <script type="text/javascript">
- <!--JavaScript代碼-->
- </script>
11. 利用瀏覽器緩存
在顯示頁面時，瀏覽器需要加載logo、CSS文件和其他一些資源。瀏覽器緩存所做的工作就是“記住”已經加載的資源，讓頁面的加載速度更快。
12. 壓縮CSS代碼
不管你在頁面中如何使用CSS，CSS文件都是越小越好，這會幫助你提升網頁的加載速度。你可以通過 Minify CSS工具 來壓縮你的CSS代碼。
壓縮前：
[css] view plaincopy
- body
- {
- background-color:#d0e4fe;
- }
- h1
- {
- color:orange;
- text-align:center;
- }
壓縮後：
[css] view plaincopy
- body {background-color:#d0e4fe;}
- h1 {color:orange;text-align:center;}
13. 盡量減少DNS查詢次數
當瀏覽器與Web服務器建立連接時，它需要進行DNS解析，將域名解析為IP地址。然而，一旦客戶端需要執行DNS lookup時，等待時間將會取決於域名服務器的有效響應的速度。
雖然所有的ISP的DNS服務器都能緩存域名和IP地址映射表，但如果緩存的DNS記錄過期了而需要更新，則可能需要通過遍歷多個DNS節點，有時候需要通過全球範圍內來找到可信任的域名服務器。一旦域名服務器工作繁忙，請求解析時就需要排隊，則進一步延遲等待時間。
因此，減少DNS的查詢次數非常重要，頁面加載時就盡量避免額外耗時。為了減少DNS查詢次數，最好的解決方法就是在頁面中減少不同的域名請求的機會。
你可以通過 request checker工具 來檢測頁面中存在多少請求，然後進行優化。
14. 盡量減少重定向
有時為了特定需求，需要在網頁中使用重定向。重定向的意思是，用戶的原始請求（例如請求A）被重定向到其他的請求（例如請求B）。
但是這會造成網站性能和速度下降，因為瀏覽器訪問網址是一連串的過程，如果訪問到一半而跳到新地址，就會重復發起一連串的過程，這將浪費很多的時間。所以我們要盡量避免重定向，Google建議：
- 不要鏈接到一個包含重定向的頁面
- 不要請求包含重定向的資源
15. 優化樣式表和腳本的順序
Style標簽和樣式表調用代碼應該放置在JavaScript代碼的前面，這樣可以使頁面的加載速度加快。
[html] view plaincopy
- <head>
- <meta name=description content="description"/>
- <title>title</title>
- <style>
- page specific css code goes here
- </style>
- <script type="text/javascript">
- javascript code goes here
- </script>
- </head>
16. 避免JavaScripts阻塞渲染
瀏覽器在遇到一個引入外部JS文件的<script>標簽時，會停下所有工作來下載並解析執行它，在這個過程中，頁面渲染和用戶交互完全被阻塞了。這時頁面加載就會停止。
谷歌 建議 刪除幹擾頁面中第一屏內容加載的JavaScript，第一屏是指用戶在屏幕中最初看到的頁面，無論是桌面瀏覽器、手機，還是平板電腦。
17. 縮小原始圖像
如果無需在頁面中顯示較大的圖像，那麽就建議將圖像的實際大小縮小為顯示的大小，這樣可以減少下載圖像所需的時間。
18. 指定圖像尺寸
當瀏覽器加載頁面的HTML代碼時，有時候需要在圖片下載完成前就對頁面布局進行定位。如果HTML裏的圖片沒有指定尺寸（寬和高），或者代碼描述的尺寸與實際圖片的尺寸不符時，瀏覽器則要在圖片下載完成後再“回溯”該圖片並重新顯示，這將消耗額外的時間）。
所以，最好為頁面中的每一張圖片都指定尺寸，不管是在HTML裏的<img>標簽中，還是在CSS中。
更多信息： https://developers.google.com/speed/docs/insights/rules
二、雅虎的Web優化最佳實踐
1. 內容優化
- 盡量減少HTTP請求：常見方法包括合並多個CSS文件和JavaScript文件，利用CSS Sprites整合圖像，Image map（圖像中不同的區域設置不同的鏈接），內聯圖象（使用 data: URL scheme 在實際的頁面嵌入圖像數據）等。
- 減少DNS查找
- 避免重定向
- 使Ajax可緩存
- 延遲加載組件：考慮哪些內容是頁面呈現時所必需首先加載的、哪些內容和結構可以稍後再加載，根據這個優先級進行設定。
- 預加載組件：預加載是在瀏覽器空閑時請求將來可能會用到的頁面內容（如圖像、樣式表和腳本）。當用戶要訪問下一個頁面時，頁面中的內容大部分已經加載到緩存中了，因此可以大大改善訪問速度。
- 減少DOM元素數量：頁面中存在大量DOM 元素，會導致JavaScript遍歷DOM的效率變慢。
- 根據域名劃分頁面內容：把頁面內容劃分成若幹部分可以使你最大限度地實現平行下載。但要確保你使用的域名數量在2個到4個之間（否則與第2條沖突）。
- 最小化iframe的數量：iframes 提供了一個簡單的方式把一個網站的內容嵌入到另一個網站中。但其創建速度比其他包括JavaScript和CSS的DOM元素的創建慢了1-2個數量級。
- 避免404：HTTP請求時間消耗是很大的，因此使用HTTP請求來獲得一個沒有用處的響應（例如404沒有找到頁面）是完全沒有必要的，它只會降低用戶體驗而不會有一點好處。
2. 服務器優化
- 使用內容分發網絡（CDN）：把你的網站內容分散到多個、處於不同地域位置的服務器上可以加快下載速度。
- 添加Expires或Cache-Control信息頭：對於靜態內容，可設置文件頭過期時間Expires的值為“Never expire（永不過期）”；對於動態內容，可使用恰當的Cache-Control文件頭來幫助瀏覽器進行有條件的請求。
- Gzip壓縮
- 設置ETag：ETags（Entity tags，實體標簽）是web服務器和瀏覽器用於判斷瀏覽器緩存中的內容和服務器中的原始內容是否匹配的一種機制。
- 提前刷新緩沖區：當用戶請求一個頁面時，服務器會花費200到500毫秒用於後臺組織HTML文件。在這期間，瀏覽器會一直空閑等待數據返回。在PHP中，可以使用flush()方法，它允許你把已經編譯的好的部分HTML響應文件先發送給瀏覽器，這時瀏覽器就會可以下載文件中的內容（腳本等）而後臺同時處理剩余的HTML頁面。
- 對Ajax請求使用GET方法：當使用XMLHttpRequest時，瀏覽器中的POST方法會首先發送文件頭，然後才發送數據。因此使用GET最為恰當。
- 避免空的圖像src
3. Cookie優化
- 減小cookie大小：去除不必要的coockie，並使coockie體積盡量小以減少對用戶響應的影響
- 針對Web組件使用域名無關的Cookie：對靜態組件的Cookie讀取是一種浪費，使用另一個無Cookie的域名來存放靜態組件是一個好方法，或者也可以在Cookie中只存放帶www的域名。
4. CSS優化
- 將CSS代碼放在HTML頁面的頂部
- 避免使用CSS表達式：CSS表達式在執行時候的運算量非常大，會對頁面性能產生大的影響
- 使用<link>來代替@import
- 避免使用Filters：IE獨有屬性AlphaImageLoader用於修正IE 7以下版本中PNG圖片的半透明效果，但它的問題在於瀏覽器加載圖片時它會終止內容的呈現並且凍結瀏覽器。
5. JavaScript優化
- 將JavaScript腳本放在頁面的底部
- 將JavaScript和CSS作為外部文件來引用：在實際應用中使用外部文件可以提高頁面速度，因為JavaScript和CSS文件都能在瀏覽器中產生緩存。
- 縮小JavaScript和CSS
- 刪除重復的腳本
- 最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢
- 開發智能的事件處理程序
6. 圖像優化
- 優化圖片大小
- 通過CSS Sprites優化圖片
- 不要在HTML中使用縮放圖片
- favicon.ico要小而且可緩存
7. 針對移動優化
- 保持組件大小在25KB以下：主要是因為iPhone不能緩存大於25K的文件（註意這裏指的是解壓縮後的大小）。
- 將組件打包成為一個復合文檔：把頁面內容打包成復合文本就如同帶有多附件的Email，它能夠使你在一個HTTP請求中獲取多個組件。
更多信息：http://developer.yahoo.com/performance/rules.html（中文翻譯）
三、一些工具
1. Google PageSpeed
Google提供了 PageSpeed工具，這是一個瀏覽器插件，可以很好地應用上文中Google所提到的Web優化實踐——幫助你輕松對網站的性能瓶頸進行分析，並為你提供優化建議。
- 在線分析你的網站
- 安裝瀏覽器插件（ Chrome、 Firefox）
- 通過 Insights API在應用中嵌入PageSpeed功能
2. 雅虎 YSlow
YSlow是雅虎推出的一款瀏覽器插件，可以幫助你對網站的頁面進行分析，並為你提供一些優化建議，以提高網站的性能。
- Firefox插件
- Chrome插件
- YSlow for Mobile/Bookmarklet
- 源碼
3. 其他分析優化工具
- 蜘蛛模擬器：這個工具可以分析你的頁面，並提供一些優化建議。
- 圖像SEO工具：這個工具可以檢查圖片的alt標簽，並提供一些優化建議。
- 請求檢查器：找出頁面中需要加載哪些資源和服務。
- 鏈接檢查器：檢查頁面中內部、外部和無效鏈接。
- HTTP頭檢查：顯示網頁或資源的HTTP響應頭。
- 社交檢查器：檢查頁面中的社交組件，比如Google+、Facebook、Twitter、Linkedin和Pinterest。
- If modified檢查器：檢查頁面是否接受 If-Modified-Since HTTP頭。
- Gzip檢查器：檢查頁面是否經過了Gzip壓縮。
- CSS delivery工具：檢查頁面中所使用的CSS文件。
- 面包屑工具：可根據你輸入的信息提供面包屑導航的代碼。
- CSS壓縮工具：用於壓縮CSS代碼。
通過以上的優化建議和優化工具，可以輕松找到影響你的Web頁面性能的瓶頸，輕松實現Web頁面性能的提升。如果你也有Web優化方面的經驗，歡迎分享。
Web前端優化最佳實踐及工具集錦