image.png
一、核心性能指標(biāo)（Lighthouse 標(biāo)準(zhǔn)）
-
加載性能
-
LCP (Largest Contentful Paint) ：最大內(nèi)容渲染時(shí)間
- 目標(biāo)：≤2.5 秒（優(yōu)秀）
- 優(yōu)化方向：優(yōu)先加載首屏關(guān)鍵資源，使用
<link rel="preload">預(yù)加載最大元素
-
FCP (First Contentful Paint) ：首次內(nèi)容渲染時(shí)間
- 目標(biāo)：≤1.8 秒（優(yōu)秀）
- 優(yōu)化方向：減少關(guān)鍵渲染路徑長(zhǎng)度，使用
async/defer加載非阻塞腳本
-
-
交互體驗(yàn)
-
FID (First Input Delay) ：首次輸入延遲
- 目標(biāo)：≤100ms（優(yōu)秀）
- 優(yōu)化方向：避免主線程長(zhǎng)時(shí)間阻塞，使用
requestIdleCallback處理非緊急任務(wù)
-
CLS (Cumulative Layout Shift) ：累積布局偏移
- 目標(biāo)：≤0.1（優(yōu)秀）
- 優(yōu)化方向：為圖片 / 視頻設(shè)置
width/height屬性，避免動(dòng)態(tài)內(nèi)容無占位符加載
-
-
資源效率
-
TTI (Time to Interactive) ：可交互時(shí)間
- 目標(biāo)：≤5 秒（移動(dòng)端）/≤3 秒（桌面端）
- 優(yōu)化方向：代碼分割（Webpack SplitChunks），使用懶加載組件
-
二、其他關(guān)鍵指標(biāo)
FMP (First Meaningful Paint) ：首次有意義渲染
SI (Speed Index) ：頁面加載速度指數(shù)（越小越好）
-
內(nèi)存使用：
- JS 堆內(nèi)存 < 500MB（移動(dòng)端）/< 1GB（桌面端）
- 無內(nèi)存泄漏（通過 Chrome Memory Tab 檢測(cè)）
三、優(yōu)化目標(biāo)與策略
-
資源體積優(yōu)化
- JS：Gzip/Brotli 壓縮后 < 200KB（首屏）
- CSS：壓縮后 < 100KB
- 圖片：WebP/AVIF 格式替代 JPEG/PNG，體積減少 25%-50%
-
渲染性能優(yōu)化
- 關(guān)鍵 CSS 內(nèi)聯(lián)（Critical CSS）
- 使用
Intersection Observer實(shí)現(xiàn)懶加載 - 減少重排與重繪（使用
will-change提示瀏覽器優(yōu)化）
-
網(wǎng)絡(luò)優(yōu)化
-
緩存策略：
- CDN 緩存靜態(tài)資源
- Service Worker 實(shí)現(xiàn)離線緩存
HTTP/2 多路復(fù)用
DNS Prefetch：
<link rel="dns-prefetch" >
-
-
代碼質(zhì)量?jī)?yōu)化
- 避免閉包內(nèi)存泄漏
- 防抖節(jié)流處理事件監(jiān)聽
- 使用
Web Workers處理計(jì)算密集型任務(wù)
四、工具與監(jiān)控
-
測(cè)量工具
- Lighthouse：自動(dòng)化生成性能報(bào)告
- WebPageTest：多地點(diǎn)測(cè)速與視頻錄制
- Chrome DevTools：Performance 面板分析時(shí)間線
-
持續(xù)監(jiān)控
-
RUM（真實(shí)用戶監(jiān)控）：
- 阿里云 / 騰訊云的前端監(jiān)控服務(wù)
- 使用
Navigation Timing API記錄關(guān)鍵指標(biāo)
建立 SLA：頁面加載失敗率 < 0.5%，慢加載率 < 5%
-
五、場(chǎng)景化優(yōu)化示例
-
移動(dòng)端：
- 優(yōu)先加載低分辨率圖片（srcset）
- 啟用數(shù)據(jù)壓縮（Brotli 比 Gzip 壓縮率高 20%）
-
電商詳情頁：
- 骨架屏 + 漸進(jìn)式圖片加載（Progressive JPEG）
- 分頁加載替代無限滾動(dòng)
通過組合使用上述指標(biāo)與策略，可實(shí)現(xiàn)：
- 首屏加載時(shí)間減少 30%-50%
- 交互延遲降低 40%
- 內(nèi)存占用減少 25%
- 帶寬消耗節(jié)省 30%+
