前端性能優化

何謂前端性能？

從用戶訪問網站到頁面完整展現，通過各種優化策略提升加載速度和用戶體驗

為何重要？

網頁加載速度直接影響用戶留存和產品收入

如何學習

• 前端性能優化知識，包括html、css、js資源文件的優化，以及app、服務端和網絡優化基於整個研發過程展開
• 從靜態資源優化入手，到全鏈路質量監控體系建設

1. 靜態資源優化：

• 涵蓋 HTML、CSS、JS 和圖片等靜態資源。
• 講解圖片格式應用場景和使用策略。
• 討論文件壓縮合併、打包方案、版本號更新方案，以及前端工程化工具。
• eg. 圖片壓縮、gzip、tree shaking

2. 頁面渲染架構設計：

• 系統化講解頁面渲染技術，包括前後端分離技術（SPA、PWA 等）。
• 涉及頁面加載策略、接口服務調優、接口緩存策略和實際性能優化案例。
• 介紹前端組件化和模塊化以加速業務開發。
• eg. SPA、SSR、PWA、API cache、render cache、dynamic import

3. Server 端和 Network 層面優化：

• CDN 和 DNS 優化，減少 HTTP 請求數，減少 Cookie 大小。
• NGX 緩存配置與優化，全站 HTTPS 配置及 HTTP/2 升級方法。

4. 開發流程優化：

• 技術調研方法，前後端接口約定，加快接口連接。
• 前端自動化測試、自動部署和上線，提高研發效率的方法。

5. 監控體系建設：

• 衡量性能優化結果，包括 H5 質量檢測、性能監控和錯誤監控。
• 原生 App 的性能和錯誤監控。
• eg. Sentry, Lighthouse, SonarCube, Grafana Faro Web SDK...