web前端優化之瀏覽器渲染優化

用戶訪問買個頁面要經過請求和等待兩個過程，這個瞬間大概消耗了一下幾部分時間：

（1）數據在網絡上傳輸的時間；

（2）站點服務器接受處理請求並生成迴應數據的時間；

（3）瀏覽器在本地渲染的時間。

主要分析瀏覽器渲染優化

（1）減小http請求的次數，由於每一個請求都要經過以上三步才能返回徹底正常的數據，根據功能和數據加載流程合併相應的js,css,images 減小其請求的次數；

（2）減小帶寬，壓縮對應的文件去掉一些空格，註釋提升相應速度；

（3）把樣式表放在上面能夠「顯式」地提升頁面的顯示效率。我之因此稱之爲「顯式」，是由於用戶眼睛看到和感受上的速度提高，實際的頁面傳輸效率並無獲得提升。 但這麼作不表明它是無心義的，在某些時候，你明明已經看到頁面已經下載完畢，但卻發現它的佈局還在不斷地變化，這是由於樣式表沒有進行初始化的緣由。

（4）把腳本放到下面，能夠減小瀏覽器的等待時間，將文檔的顯示提升的最高的優先級顯示，而後再執行腳本，這樣用戶幾乎就感受不到等待。

（5）將JavaScript和CSS存放到外部文件中，能夠有效地將js, css文檔緩存到本地，當你請求一樣包含以上js, css的腳本的時候，便無需從新下載，直接從緩存中載入了。此外，它還有一個很明顯的優勢，就是加強了可重用性，你沒必要在每一個頁面都重複地寫上一大串的代碼，形成資源和帶寬的浪費。

(6)用data:URL scheme的方式把圖片內容代碼直接嵌入html代碼中，這樣會增大html代碼的體積，改進的方式是把內嵌圖片嵌入到css中（css被緩存），這樣就會更好的減小http請求數並且不增大html的體積。

(7)利用GZip和緩存控制頭（Cache-Control headers）使用Etags減小web應用寬帶和負載