[web前端性能優化]性能優化只有三步，你瞭解嗎

關於前端的性能優化，每次提到這個詞你們都有不少idea。如今靜下來思考下咱們用到的各類手段最終能夠概括爲三步

一，關鍵資源字節數

字節數也就是我一般說的減小資源文件（js,css,image,video...）的大小

1，壓縮

• 前端使用uglify混淆壓縮
• 後端開啓gzip
• 對圖片進行壓縮，使用壓縮比例更高的格式（webP）

2，緩存

• 強緩存（http狀態碼：200），不用請求服務器直接使用本地緩存
• 協商緩存（http狀態碼：304），使用時先請求服務器若被告知緩存沒過時則使用本地緩存，不用下載資源
• 使用localstorage對數據進行存儲

3，針對首屏優化

對非關鍵資源延遲加載、異步加載，減小首屏資源大小

二，關鍵資源鏈接數

1，合併請求

• 使用http2.0的多路複用合併請求
• 配置combo，在沒法使用http2.0的狀況下做爲一種合併資源請求的手段

2，減小圖片請求數

• 使用spite圖
• 使用svg-symbol

3，針對一些場景採用css、js內聯的方式

4，使用強緩存減小了一次服務器請求

5，非關鍵資源延遲、異步加載，減小了首屏資源鏈接數

三，關鍵渲染路徑

網上有張關於頁面渲染路徑的圖，這裏我就不放了，你們有興趣本身百度下

1，bigpipe分塊輸出

這裏主要是由於要完成一整個頁面的輸出後端須要處理不少個任務，咱們能夠將這些多個任務進行分塊，誰先完成誰就先輸出，最終經過JS回填的方式輸出DOM節點。這種方式主要解決了直出頁面阻塞的問題

2，bigrender分塊渲染

常規的手段就是採用前端模板渲染頁面，針對首屏時間主要減小了首次構建DOM樹時的節點數

3，針對reflow，repaint，composit路徑處理

4，涉及到動畫時關於layer的概念render layer、graphics layer

5，css放在頭部、js放底部避免阻塞DOM樹的構建，

關於css、js的位置對於頁面渲染的影響你們能夠關注下相關的文章。 核心：css資源不會阻塞DOM樹的構建但會阻塞DOM的渲染，JS會阻塞DOM樹的構建，CSS會阻塞JS的執行

總結

上面針對性能優化的三步給出了相應的解決方案，這並非所有，之後你們在思考前端性能優化師能夠從這三個基準方向出發