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

NO IMAGE

關於前端的性能優化,每次提到這個詞大家都有很多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的執行

總結

上面針對性能優化的三步給出了相應的解決方案,這並不是全部,以後大家在思考前端性能優化師可以從這三個基準方向出發

相關文章

[vuex]源碼學習筆記

[VUE]computed屬性的數據響應和依賴緩存實現過程

[javascript]搞清this的指向只需問兩個問題

[webpack]中小型多頁面應用整合webpack終極方案