轉：網站前端性能優化

繼前面幾篇文章後再來講說老生常談的話題，怎麼樣提高前端性能。文中不少取材自網絡及《High Performance Web Sites》，並根據本身工做中所接觸到的知識整理而成。

 

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的分析工具