關於前端的效能優化，每次提到這個詞大家都有很多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的執行
總結
上面針對效能優化的三步給出了相應的解決方案，這並不是全部，以後大家在思考前端效能優化師可以從這三個基準方向出發