繼前面幾篇文章後再來說說老生常談的話題，怎麼樣提升前端性能。文中很多取材自網路及《High Performance Web Sites》，並根據自己工作中所接觸到的知識整理而成。 http://hovertree.com/menu/webfront/ 1. 減少HTTP請求 終端用戶響應時間80%消 ...
繼前面幾篇文章後再來說說老生常談的話題，怎麼樣提升前端性能。文中很多取材自網路及《High Performance Web Sites》，並根據自己工作中所接觸到的知識整理而成。
http://hovertree.com/menu/webfront/
1. 減少HTTP請求
終端用戶響應時間80%消耗在前端，而大部分時間都是在下載頁面的資源：圖片，腳本，flash等等，減少請求資源簡化頁面設計成為了性能提升的關鍵。儘量合併CSS、JS及圖片文件，減少HTTP請求。
2. 使用內容分發機制
使用內容分發如CDN加速，使用戶從離自己最近的伺服器下載文件。但一般要求減少DNS查詢次數，如同一個頁面的請求資源儘量少的使用不同的主機名，可以減少網站並行下載的數量。但很多網站為了加速下載資源特意用了多個主機名，這樣可以並行下載資源。在低版本的瀏覽器IE6,7中並行連接數為4個，高版本的IE8及以上以及現在較新版的chrome，firefox等瀏覽器都是6個。一般CSS,JS及圖片資源均通過CDN加速，並且使用多個主機名來實現並行下載。
3. 設置header的過期時間，使內容可以緩存
這個規則可以從兩個方面來看：
對於靜態組件，實現“永不過期”的政策，通過設置一個較長時間的Expires頭，例如圖片，flash；
對於動態組件：使用適當的Cache-Control頭來處理不同的請求，如CSS,JS等。
對於第一次訪問網站的用戶來說，圖片資源等都是固定不變的，設置為永不過期的Expires頭可以在客戶端緩存，減少服務端的負載以及請求數量，而JS，CSS資源可以設置一個適當的過期時間。
但是實際上我們會遇到一個挑戰：如果版本更新導致原來的CSS或JS有改動，如何確保終端用戶是下載的最新的資源文件呢？
最最常用的一種方法，就是每次有改動時生成一個tag然後加在文件名稱中，如果有修改文件名就會不一致，客戶端就會強制獲取最新的資源文件，amazon，google等都是這麼處理的；當然還有一種辦法就是在資源文件目錄上打上tag，但是有一種弊端就是對於沒有更改的文件客戶端也會重新下載對應的資源，如果對於發佈較為頻繁的web項目，用戶在首次訪問時就比較耗性能。
4. 使用Gzip壓縮內容
服務端可以把不只是html還有JS，CSS，XML等一切文本的響應都進行壓縮，減小傳輸的大小
5. 樣式放在頁頭
用戶在打開一個頁面時，瀏覽器會逐步的載入頭部，導航欄及logo等，在載入過程中用戶能看到頁面的反饋，提升了用戶體驗。如果樣式放在頁腳，帶來的問題是，包括在IE的很多瀏覽器上禁止逐步呈現，他們會阻止渲染，避免頁面樣式變化而引起重繪頁面元素，用戶就只能看到一個空白頁。
6. JavaScript放在頁腳
相對於CSS而言，JS提倡放在頁腳載入避免阻礙其他資源的並行下載，對於內容性質的網站，將內容的HTML放在相對靠前的位置，而對於交互較多的網頁，需要把特別重要的核心組件的JS剝離往前放，而不太重要的則在最後載入。更詳細的關於Javascript的載入請查看上一篇文章：《從兩個bug來看網頁內容的裝載》
7. 避免使用CSS表達式
CSS表達式計算會非常頻繁，不僅僅是在渲染和resize時會執行，滾動頁面甚至移動滑鼠都會重新計算。
8. 外部引用JavaScript和CSS
如果通過引用外部JavaScript和CSS的形式，因為瀏覽器會緩存這些資源，下次訪問時可以使得頁面載入更快，而如果將它們寫在HTML中每次訪問頁面時都會再次載入。
9. 減少DNS查詢
這點與第2點有相似之處，需要做的就是在減少DNS查詢次數與併發下載之間做好平衡。
10. 精簡JavaScript和CSS
刪除JS和CSS中的空白換行，註釋等，使用混淆把JS中的長變數換成短變數，可以縮小他們的體積，減少請求數據所占用的網路帶寬.
11. 避免重定向
除了在header中人為的重定向之外，網頁重定向常在不經意間發生，被重定向的內容將不會使用瀏覽器的緩存。比如用戶在訪問www.xxx.com，伺服器會通過301轉向到www.xxx.com/，在後面加了一個“/”。如果伺服器的配置不好，這也會給伺服器帶來額外的負擔。通過配置apache的 alias或使用mod_rewrite模塊等方法，可以避免不必要的重定向，而在ngingx中也可以直接配置rewrite規則。
12. 刪除重覆的腳本
在頁面中重覆的腳本會增加性能壓力，美國20%的熱門網站中都包含有重覆的腳本，團隊規模和腳本數量增加了出現重覆腳本的幾率。在IE中，包含重覆的JS腳本會導致瀏覽器的緩存不被使用，同時增加不必要的請求（僅在IE，FF下不會出現重覆的請求）和重覆的腳本執行（在IE和FF下都會重覆執行）。
13. 配置ETags
ETag是一種伺服器和瀏覽器用於識別請求的瀏覽器已緩存的資源是否與服務端匹配的機制，比last-modified更靈活，能更加精確的知道文件是否被修改過，因為If-Modified-Since只能檢查秒級的修改，而ETag是一個唯一的字元串，不會受到修改時間的限制。
順便說說瀏覽器訪問URL時的工作機制：
a. 第一次訪問url時，用戶從伺服器段獲取頁面內容，並把相關的文件（images,css,js…）放在高速緩存中，也會把文件頭中的expired time,last modified, ETags等相關信息也一同保留下來。
b. 用戶重覆訪問url時，瀏覽器首先看高速緩存中是否有本站同名的文件，如果有，則檢查文件的過期時間；如果尚未過期，則直接從緩存中讀取文件，不再訪問伺服器。
c. 如果緩存中文件的過期時間不存在或已超出，則瀏覽器會訪問伺服器獲取文件的頭信息，檢查last modifed或ETags等信息，如果發現本地緩存中的文件在上次訪問後沒被修改，則使用本地緩存中的文件；如果修改過，則從伺服器上獲取最新版本。
14. 使Ajax可緩存
Ajax如果使用POST請求的話，瀏覽器通常會假定用戶是提交數據給服務端的，所以自然不會緩存，因為有數據提交就意味著服務端要所處理，而get形式的Ajax請求卻可以緩存，如果對安全性沒有特別高要求的可以使用get形式的Ajax請求。
15. 減少DOM節點，加速頁面渲染
16. 避免404錯誤
17. 減少Cookie的大小，靜態資源使用無cookie的域，客戶端請求它們的時候，減少 Cookie 的反覆傳輸對主功能變數名稱的影響。Yahoo!使用yimg.com,YouTube使用ytimg.com.Amazon使用images-amazon.com
18. 避免頻繁操作DOM節點，過多的操作還可能導致瀏覽器死機，據說之前twitter就因為在windows.scroll事件的操作中綁定了過多的dom操作而導致瀏覽器死機
19. 用LINK而不用@import方式導入樣式
20. 給圖片加上正確的寬高值，以減少頁面重繪，同時可以防止圖片縮放
21. 縮小favicon.ico並緩存，很多時候開發者都會忽略這個文件，但是每當有用戶收藏網站/網頁時，瀏覽器會自動請求這個文件，就算這個圖標文件沒有在你的網頁中明顯說明，瀏覽器也會請求，如果不添加就會出現404.
使用工具：
目前有一些工具可以用來做性能分析，並依據以上法則給出優化建議，值得我們使用，常見的工具如下：
Yslow: 雅虎針對前端網站優化提出了23條準則，同時開發了網頁性能分析瀏覽器插件；
PageSpeed：是google推出的性能分析工具
dynaTrace: 是基於IE的分析工具
推薦：http://www.cnblogs.com/roucheng/p/texiao.html
