宏觀方面
- DNS查詢
- HTTP/SSL
- TCP
- 響應(yīng)解析(SPA/SSR)
- 瀏覽器渲染
瀏覽器解析html/css，執(zhí)行js
解析html(AST) dom tree?？梢詼p少dom層間
解析css, css tree。優(yōu)化選擇器
合并成 render tree
瀏覽器調(diào)用操作系統(tǒng)渲染頁面。減少重繪和回流，調(diào)用硬件加速
優(yōu)化策略
- 減少文件請求的數(shù)量和大小
- 緩存，cdn，
- 圖片優(yōu)化，
jpeg / png / gif / webp / 壓縮圖片 / 漸進(jìn)加載(先加載占位->低像素->實際) / 懶加載 - 靜態(tài)文件優(yōu)化，
- 瀏覽器優(yōu)化
- 文件壓縮合并，
- 減少代碼的執(zhí)行
- 節(jié)流防抖，
- 按需加載執(zhí)行，滾動加載
- 重繪回流
- 框架優(yōu)化
- html / css / js
數(shù)據(jù)結(jié)構(gòu)、算法，
能做哪些優(yōu)化
- 代碼優(yōu)化
框架本身的優(yōu)化: vue1/2/3, react15/16
框架的日常寫法
js/css - 研發(fā)優(yōu)化/項目深度優(yōu)化，亮點
需求優(yōu)化
數(shù)據(jù)量大，網(wǎng)速不穩(wěn)定，交互需求要求更高
大文件
長列表 - 開發(fā)環(huán)境的優(yōu)化 vite, snowpack
- 人的優(yōu)化，掌握別人不會的
性能分析工具
使用lighthouse分析網(wǎng)站性能
cnpm install -g lighthouse / yarn global add lighthouse
然后在終端輸入命令： lighthouse https://www.cnblogs.com/Chrome性能分析工具Coverage使用方法
打開控制臺--》點擊‘Sources’--》ctrl+shift+p--》
在命令窗口輸入coverage--》在下邊新出現(xiàn)的窗口中點擊左上角刷新按鈕。
性能監(jiān)控指標(biāo)
前端性能指標(biāo)分析
- FP首次繪制
- FCP首次內(nèi)容繪制
- FMP首次有效繪制
如何獲取最重要的節(jié)點。
a. 頁面進(jìn)入使用mutationObserver監(jiān)聽dom
b. 對變化的dom做上標(biāo)記
c. 監(jiān)聽load事件
d. 便利dom tree
e. 根據(jù)元素可視區(qū)域，計算元素權(quán)重
f. 遍歷父元素，對比合并
e. 獲取權(quán)重最高的dom，
f. 判斷是否加載完成
是否是img/video/audio，判斷資源加載時間: performance.getEntries。
單純的dom，計算時間變化
g. 計算FMP - TTI可交互時間
