網站性能優化實戰

一.網絡傳輸性能優化

讀取緩存→DNS查詢→TCP連接→發起請求→接收響應→處理HTML元素→加載完成。

1.資源打包壓縮

目的：減小請求數、減少請求資源體積、提高網絡傳輸速率

工具：webpack（js壓縮，html壓縮，css提取壓縮，依賴關係分析等）

3.圖片資源優化

1）使用精靈圖(雪碧圖css sprite)，就是不少張圖標合併到一塊兒，經過背景位置來控制

這裏給你們推薦一個自動化生成雪碧圖的工具：https://www.toptal.com/developers/css/sprite-generator 

2）使用字體圖標

字體圖標的使用不在這裏展開，感興趣的請看個人另一篇文章：http://www.javashuo.com/article/p-dfdnxyqd-ev.html

二.頁面渲染性能優化

1.減小重排仍是重繪

1）CSS屬性讀寫分離：瀏覽器每次對元素樣式進行讀操做時，都必須進行一次從新渲染（重排 + 重繪），因此咱們在使用JS對元素樣式進行讀寫操做時，最好將二者分離開，先讀後寫，避免出現二者交叉使用的狀況。最最最客觀的解決方案，就是不用JS去操做元素樣式，這也是我最推薦的。

2）經過切換class或者style.csstext屬性去批量操做元素樣式

3）DOM元素離線更新：當對DOM進行相關操做時，例如innerHTML、appendChild等均可以使用Document Fragment對象進行離線操做，待元素「組裝」完成後再一次插入頁面，或者使用display:none 對元素隱藏，在元素「消失」後進行相關操做。

4）將沒用的元素設爲不可見：visibility: hidden，這樣能夠減少重繪的壓力，必要的時候再將元素顯示。

5）壓縮DOM的深度，一個渲染層內不要有過深的子元素，少用DOM完成頁面樣式，多使用僞元素或者box-shadow取代。

6）圖片在渲染前指定大小：由於img元素是內聯元素，因此在加載圖片後會改變寬高，嚴重的狀況會致使整個頁面重排，因此最好在渲染前就指定其大小，或者讓其脫離文檔流。

7）對頁面中可能發生大量重排重繪的元素單獨觸發渲染層，使用GPU分擔CPU壓力。