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