4. 效能

學習成果

• 理解實際效能和感知效能的概念以及兩者之間的區別。

• 理解關鍵效能概念

  • 源順序。

  • 關鍵路徑。

  • 延遲。

  • 瀏覽器如何渲染頁面。

• 理解效能如何影響可持續性——良好的效能可以透過減少能源消耗和頻寬使用量，對地球產生積極影響。

  • 能效

    • 程式碼效能（參見 4.5 JavaScript 與效能）。

    • 靜態功耗（空閒狀態）。

  • 硬體效率（可維修性/利用率）。

  • 需求效率

    • 空間（您在哪裡執行計算）。

    • 時間（您何時執行計算）。

資源

• Web 效能的“為什麼”

• 什麼是 Web 效能？

• 感知效能

學習成果

• 如何減少頁面載入時間

  • 使用最佳媒體格式和壓縮。

  • 從靜音影片中移除不必要的音訊。

  • 使用 video preload 屬性來減少初始下載量。

  • 考慮使用自適應流。

  • 使用 width 和 height 屬性減少媒體載入卡頓。

  • 謹慎選擇字型——儘量減小檔案大小，例如只包含您需要的字形、變體和粗細。

• 如何改進“可用時間”

  • 透過最初只顯示重要內容來最小化初始載入。儘快使重要的互動功能可用。

  • 當用戶使用頁面時，可以在後臺載入其他資料和資源。

  • 對不需要立即使用的影像和其他資源使用延遲載入。

• 如何提高功能的感知效能

  • 使用動畫在狀態之間過渡，而不是讓使用者等待最終狀態。

  • 使用載入微調器和進度條指示進度，讓使用者感覺有事情在發生。

  • 明智地使用事件，例如在 keydown 時觸發操作，而不是等待 keyup。

資源

• 感知效能

• 多媒體：影像

• 多媒體：影片

學習成果

• 理解衡量效能的關鍵指標，例如首次內容繪製、速度指數、總阻塞時間、跳出率、獨立使用者/頁面瀏覽量。

• 如何使用常用的效能測量工具

  • Google Lighthouse.

  • Pagespeed Insights.

  • WebPageTest.

  • Google Analytics.

  • 瀏覽器開發者工具。

• 如何使用 Performance Web APIs 建立自己的效能測量工具

  • Performance Timeline API。

  • Navigation Timing API。

  • User Timing API。

  • Resource Timing API。

資源

• 測量效能

• Performance APIs 參考

• Google Lighthouse > Performance

• 相關的 Firefox 開發者工具：網路監視器 和 效能監視器，Firefox Source Docs

• 相關的 Chrome 開發者工具：檢查網路活動 (2019) 和 分析執行時效能 (2017)，developer.chrome.com

學習成果

• 理解改進 CSS 效能的技術

  • 僅在需要時載入；使用媒體查詢進行最佳化。

  • 最小化動畫，並強制 GPU 執行動畫。

  • 最小化重繪。

  • 適當地使用 will-change 和 contain。

資源

• CSS 效能最佳化

學習成果

• 理解改進 JavaScript 效能的技術

  • 減少使用的 JavaScript 量。

  • 僅在需要時載入 JavaScript，並移除未使用的程式碼。

  • 適當地使用延遲/非同步 JavaScript。

  • 壓縮、打包和拆分 JavaScript。

資源

• JavaScript 效能