2021前端性能優(yōu)化總結(jié)【匯總】

關(guān)注公眾號(hào) 前端人，回復(fù)“加群”

添加無(wú)廣告優(yōu)質(zhì)學(xué)習(xí)群

前端指標(biāo)

1. FP，F(xiàn)irst Paint。
2. FCP，F(xiàn)irst Content Paint。
3. FMP，F(xiàn)irst Meaning Paint。
4. ATF，Above The Fold，首屏?xí)r間
5. TTI，Time To Interact，首次交互時(shí)間，可以用DomReady時(shí)間。
6. 資源總下載時(shí)間。Load時(shí)間 >= DomContentLoaded時(shí)間

• （1）Dom加載完時(shí)間，DomContentLoaded。
• （2）頁(yè)面資源加載完時(shí)間，Load，包括圖片，音視頻等異步資源。但是資源加載完之后，頁(yè)面還沒(méi)有完全穩(wěn)定，完全穩(wěn)定的時(shí)間由finish決定。

7. 服務(wù)端重要接口加載速度。
8. 客戶端啟動(dòng)容器（WebView）時(shí)間。

優(yōu)化方向

前端性能優(yōu)化分為兩個(gè)方向，一是工程化方向，另一個(gè)是細(xì)節(jié)方向。這個(gè)概念來(lái)自于知乎Lucas HC。

工程化方向

1. 客戶端Gzip離線包，服務(wù)器資源Gzip壓縮。
2. JS瘦身，Tree shaking，ES Module，動(dòng)態(tài)Import，動(dòng)態(tài)Polyfill。
3. 圖片加載優(yōu)化，Webp，考慮兼容性，可以提前加載一張圖片，嗅探是否支持Webp。
4. 延遲加載不用長(zhǎng)內(nèi)容。通過(guò)打點(diǎn)，看某些彈窗內(nèi)或者子內(nèi)容是否要初始化加載。
5. 服務(wù)端渲染，客戶端預(yù)渲染。
6. CDN靜態(tài)資源
7. Webpack Dll，通用優(yōu)先打包抽離，利用瀏覽器緩存。
8. 骨架圖
9. 數(shù)據(jù)預(yù)取，包括接口數(shù)據(jù)，和加載詳情頁(yè)圖片。
10. Webpack本身提供的優(yōu)化，Base64，資源壓縮，Tree shaking，拆包c(diǎn)hunk。
11. 減少重定向。

細(xì)節(jié)方向

1. 圖片，圖片占位，圖片懶加載。雪碧圖
2. 使用 prefetch / preload 預(yù)加載等新特性
3. 服務(wù)器合理設(shè)置緩存策略
4. async（加載完當(dāng)前js立即執(zhí)行）/defer(所有資源加載完之后執(zhí)行js)
5. 減少Dom的操作，減少重排重繪
6. 從客戶端層面，首屏減少和客戶端交互，合并接口請(qǐng)求。
7. 數(shù)據(jù)緩存。8. 首頁(yè)不加載不可視組件。
8. 防止渲染抖動(dòng)，控制時(shí)序。
9. 減少組件層級(jí)。
10. 優(yōu)先使用Flex布局。

卡頓問(wèn)題解決

1. CSS動(dòng)畫效率比JS高，css可以用GPU加速，3d加速。如果非要用JS動(dòng)畫，可以用requestAnimationFrame。
2. 批量進(jìn)行DOM操作，固定圖片容器大小，避免屏幕抖動(dòng)。
3. 減少重繪重排。
4. 節(jié)流和防抖。
5. 減少臨時(shí)大對(duì)象產(chǎn)生，利用對(duì)象緩存，主要是減少內(nèi)存碎片。
6. 異步操作，IntersectionObserver，PostMessage，RequestIdleCallback。

性能優(yōu)化API

1. Performance。performance.now()與new Date()區(qū)別，它是高精度的，且是相對(duì)時(shí)間，相對(duì)于頁(yè)面加載的那一刻。但是不一定適合單頁(yè)面場(chǎng)景。
2. window.addEventListener("load", ""); window.addEventListener("domContentLoaded", "");
3. Img的onload事件，監(jiān)聽首屏內(nèi)的圖片是否加載完成，判斷首屏事件。
4. RequestFrameAnmation 和 RequestIdleCallback。
5. IntersectionObserver. MutationObserver，PostMessage。
6. Web Worker，耗時(shí)任務(wù)放在里面執(zhí)行。

檢測(cè)工具

1. Chrome Dev Tools
2. Page Speed
3. Jspref