轉 《高性能網站建設指南》學習筆記

 

該書沒有深刻js或html代碼自己的邏輯，而是從性能優化角度講述了性能測試人員可以關注和實施的一些性能優化實踐。書中介紹的14條前端性能優化規則，便是雅虎Yslow所採用的14條評分準則，各準則中有借鑑意義的幾條記錄以下：

1 前端性能優化規則

1.1減小http請求

因爲瀏覽器http請求併發鏈接數的限制，在同一個域名下同時能創建的http鏈接有限，也即若有一個頁面中有6個圖片，而瀏覽器請求併發鏈接數爲2，那麼須要創建6次的http請求，並且只能等1，2個請求完成以後，才能進行第3，4個圖片的下載。影響速度。除圖片外，js文件和css文件也有相似問題，能合併的儘可能合併，以減小創建與釋放鏈接的時間。並且js文件下載時，因爲瀏覽器不知道該js是否會改變頁面顯示，所以會阻塞其它下載的任務，使瀏覽器併發能力沒法獲得利用。

減小請求的方式有：合併腳本和樣式表、CSS Sprites、內聯圖片等方式。

 

1.2使用內容發佈網絡

根據不一樣的地理位置增設服務器以加快網絡訪問。

 

1.3添加Expires頭

充分使用瀏覽器緩存，設置文件過時時間。設置了Expires頭的內容在過時前瀏覽器不會從服務器端從新下載。

1.4壓縮組件

對傳輸的內容採用gzip壓縮，能夠顯著減小傳輸時間。尤爲是文件較大的js文件、css樣式表壓縮能收到顯著的效果。

1.5將css樣式表放在頁面頂部

能夠達到逐步呈現的效果，不至於白屏。

1.6將js腳本放在頁面底部

將腳本放在頁面的底部，能夠有效防止對頁面其它組件的阻塞。

1.7精簡js

不是壓縮，而是把js的空格，空行和註釋等去掉。對於穩定的js類庫，建議採用這種方法精簡，有工具可用，精簡後可減小10%—20%的文件大小；對於開發中的js代碼，不建議精簡，由於瀏覽器端可讀性差會致使debug時不容易定位問題。

1.8配置E-tag

一般E-tag的主要問題在於：在不一樣的集羣機器上，E-tag的計算方法可能會致使不一樣機器上一樣文件的E-tag不相同，使文件再次被下載，失去了緩存的意義。

2 易於實踐使用的一些前端改善實踐

1.壓縮js，css，可減小50%以上的js文件大小

2.精簡js，可減小10%以上的js文件大小

3.合併js，至關一部分js文件是否能夠合併？全部頁面優化工做量太大，不過對某幾個可能存在性能問題的頁面可採起這一方法，如portal頁面。

4.合併圖片，採用sprint方式，將多張圖片合併爲一張，避免反覆下載多個圖片【有必定工做量，sprint合併圖片，偏移量等是精細活】

 

3 幾個前端性能相關工具的簡述

1.YSlow，主要功能是根據一些準則評分，如上面提到的8條規則，並提出建議！

2.page speed與yslow相似，Google的20條準則進行評分及建議！

3.showslow用來顯示yslow，page speed或dynatrace所得的結果！須要搭建一個服務器，並在Firefox中配置Yslow結果的發送服務器URL等。

http://ued.taobao.com/blog/2010/07/07/xvfb_yslow_showslow-2/

4.dynatrace是一款商業軟件，其Ajax Edition可用來分析熱點函數的執行狀況等。可跟蹤瀏覽器在時間軸上幾乎全部的重繪和js事件狀況！

5.selenium 採用植入js的方式來驅動瀏覽器，用IDE工具錄製腳本，而後生成Java、Ruby或Python等客戶端語言，這些語言發請求給Selenium Remote Control【要啓動一個服務，這個服務用來監聽客戶端語言的請求，驅動瀏覽器並返回結果】，Remote Control會在啓動瀏覽器時植入一個js文件，從而達到控件瀏覽器的目的。

6.WebDriver與Selenium相比不須要啓動服務，也不須要植入JS文件，可直接操做瀏覽器。提供了Java及C#形式的腳本。WebDriver與Selenium均可用來作UI自動化，Selenium基於JS，沒法控制非JS的控件，如Windows本地窗口。IE的UI自動化可用Ruby+Windows OLE對象方式驅動，對FireFox，可用的是擴展FF插件的方式，使FF啓動時加載相應的JS文件，啓動WebDriver監聽程序，監聽程序作兩件事：一是將調用者的請求轉發給FF瀏覽器進行操做；二是將瀏覽器的結果封裝後返回給調用者。