性能優化主要涵蓋了以下四個方面：
(tip:僅代表個人總結，如有不當，還希望看到的大佬多多指示)
減少網絡請求：合并文件、使用 CDN、啟用緩存。
優化資源加載：代碼分割、懶加載、圖片壓縮。
提升渲染性能：減少重繪回流、防抖節流、使用 Web Worker。
監控和迭代：定期使用工具檢測性能，持續優化。
一、網絡層面優化
- 減少 HTTP 請求
合并文件：將多個 CSS 或 JavaScript 文件合并成一個，減少請求次數。
使用 CSS Sprites：將多個小圖標合并成一張大圖，通過 CSS background-position 展示不同部分。
內聯關鍵 CSS：將首屏渲染所需的關鍵 CSS 直接內聯在 HTML 中，避免額外的請求。 - 優化資源加載
啟用 HTTP/2 或 HTTP/3：支持多路復用，減少連接建立開銷。
使用 CDN：將靜態資源部署到 CDN 節點，利用邊緣計算加速資源訪問。
資源壓縮：對 HTML、CSS、JavaScript 進行壓縮，減少文件體積。
啟用 Gzip/Brotli 壓縮：在服務器端啟用 Gzip 或 Brotli 壓縮，減少傳輸數據量。 - 緩存策略
強緩存：通過 Cache-Control 和 Expires 頭設置資源緩存時間。
協商緩存：通過 Last-Modified 和 ETag 頭判斷資源是否更新。
Service Worker：使用 Service Worker 緩存資源，實現離線訪問和緩存控制。
二、資源加載優化
- 代碼層面優化
代碼分割（Code Splitting）：使用 Webpack 等工具將代碼按路由或功能分割成多個 chunk，按需加載。
懶加載（Lazy Loading）：對圖片、視頻等資源進行懶加載，僅在進入視口時加載。
預加載（Preload）和預連接（Preconnect）：通過 和 提前加載關鍵資源或建立連接。
)
