性能優化的策略

網路層面：如何讓資源體積更小、加載更快

1. 建構策略：基於構建工具( Webpack/Rollup/Parcel/Esbuild/Vite/Gulp)

2. 圖片策略：基於圖片類型( JPG/PNG/SVG/WebP/Base64)

3. 圖片選型：了解所有圖片類型的特點及其何種應用場景最合適

4. 圖片壓縮：在部署到生產環境前使用工具或腳本對其壓縮處理
   

   類型	體積	質量	兼容	請求	壓縮	透明	場景
   JPG	小	中	高	是	有損	不支持	背景圖、輪播圖、色彩豐富圖
   PNG	大	高	高	是	無損	支持	圖標、透明圖
   SVG	小	高	高	是	無損	支持	圖標、矢量圖
   WebP	小	中	低	是	兼備	支持	看兼容情況
   Base64	看情況	中	高	否	無損	支持	圖標

1. 分發策略：基於內容分發網絡(CDN)

遵循以下兩點就能發揮 CDN 最大作用。

• 所有靜態資源走 CDN：開發階段確定哪些文件屬於靜態資源

• 把靜態資源與主頁面置於不同域名下：避免請求帶上 Cookie

• 緩存策略：基於瀏覽器緩存(强缓存/協商缓存)

渲染層面：如何讓代碼解析更好、執行更快

1. CSS 策略：基於 CSS 規則

2. 避免出現超過三層的嵌套規則

3. 避免為 ID 選擇器添加多餘選擇器
4. 避免使用標籤選擇器代替類選擇器
5. 避免使用通配選擇器，只對目標節點聲明規則

6. 避免重複匹配重複定義，關注可繼承屬性

7. DOM 策略：基於 DOM 操作

8. 緩存 DOM 計算屬性

9. 避免過多 DOM 操作

10. 使用 DOMFragment 緩存批量化 DOM 操作

11. 阻塞策略：基於腳本加載

• Async Use Case: 非 UI 庫

• 回流重繪策略：基於回流重繪

• 緩存 DOM 計算屬性

• 使用類合併樣式，避免逐條改變樣式
• 盡量使用 visibility:hidden 代替 display:none
• 使用 transform:translate3d 代替 top

• 適當使用 will-change 屬性

• 異步更新策略：基於異步更新

• 在異步任務中修改 DOM 時，把其包裝成微任務

Debounce & Throttle

• debounce: 從最後一次觸發開始，在 t 秒後執行函數。因為是最後一次觸發，所以會把中間的觸發蓋掉。

Use Case: 搜尋輸入框的推薦關鍵字功能

• throttle: 從最初一次觸發開始，在 t 秒後執行函數。中間無論觸發多少次都不會執行。

Use Case: 偵測滑鼠移動

Reference

• Demo: Debounce & Throttle
• 關於性能優化的 9 大策略和 6 大指標
• 渲染的時機