Web 效能

Web 效能是對載入時間和執行時進行客觀測量和使用者感知體驗。Web 效能是指網站載入、變得可互動和響應所需的時間，以及使用者互動過程中內容的流暢度。效能涉及以下問題：滾動是否流暢？按鈕是否響應迅速？彈窗是否快速載入並流暢動畫？客觀測量包括載入時間、每秒幀數和變得可互動所需的時間，而主觀體驗是指內容載入所需的感覺時間。

網站響應時間越長，使用者放棄網站的可能性就越大。因此，最大程度地縮短載入和響應時間，並儘快讓體驗儘可能可用和可互動，同時非同步載入體驗的較長尾部部分，從而透過新增額外的功能來掩蓋延遲，這一點非常重要。

有各種工具、API 和最佳實踐可以幫助我們衡量和提升 Web 效能。我們將在接下來的頁面中介紹它們。

Web 效能指南

效能指南是描述瀏覽器如何工作、哪些因素影響效能以及如何衡量、最佳化和監控應用程式各個方面效能的資源。

效能基礎: 效能意味著效率。在開放網路應用的背景下，本文件總體解釋了什麼是效能，瀏覽器平臺如何幫助提升效能，以及你可以使用哪些工具和流程來測試和提升效能。
填充頁面：瀏覽器如何工作: 使用者希望 Web 體驗內容載入快速且互動流暢。因此，開發者應努力實現這兩個目標。要了解如何提升效能和感知效能，瞭解瀏覽器的工作原理會有所幫助。
理解延遲: 延遲是指資料包從源到目的地所需的時間。在效能最佳化方面，重要的是要最佳化以減少導致延遲的原因，並透過模擬高延遲來測試網站效能，從而為連線速度慢或不可靠的使用者進行最佳化。
推薦的 Web 效能時間：多長時間算太長？: 對於頁面載入速度慢的明確規則沒有明確規定，但有具體的指導原則用於指示內容將載入（1 秒）、空閒（50 毫秒）、動畫（16.7 毫秒）和響應使用者輸入（50 到 200 毫秒）。
使用 dns-prefetch: DNS-prefetch 是在請求資源之前嘗試解析域名。這可能是一個稍後載入的檔案或使用者嘗試訪問的連結目標。
導航和資源時間: 導航計時是衡量瀏覽器文件導航事件的指標。資源計時是關於應用程式資源載入的詳細網路計時測量。兩者都提供相同的只讀屬性，但導航計時測量主文件的計時，而資源計時提供主文件及其請求的資源所呼叫的所有資產或資源的計時。
最佳化啟動效能: 改善啟動效能通常是能實現最高價值的效能最佳化之一。良好的使用者體驗包括確保您的應用快速載入。本文提供了編寫新應用程式和將應用程式從其他平臺移植到 Web 的效能技巧和建議。
關鍵渲染路徑: 關鍵渲染路徑是瀏覽器將 HTML、CSS 和 JavaScript 轉換為螢幕畫素所經歷的步驟序列。最佳化關鍵渲染路徑可以提升渲染效能。關鍵渲染路徑包括文件物件模型 (DOM)、CSS 物件模型 (CSSOM)、渲染樹和佈局。
懶載入: 懶載入是一種將資源標識為非阻塞（非關鍵）並僅在需要時載入這些資源的策略。這是一種縮短關鍵渲染路徑長度的方法，從而減少頁面載入時間。
推測性載入: 推測性載入是指在實際訪問相關頁面之前執行導航操作（例如 DNS 獲取、獲取資源或渲染文件）的做法，其依據是對使用者最可能接下來訪問哪些頁面的預測。
效能預算: 效能預算是一種防止效能退化的限制。它可以應用於檔案、檔案型別、頁面上載入的所有檔案、特定指標（例如，可互動時間）、自定義指標（例如，英雄元素載入時間）或一段時間內的閾值。
效能監控：RUM vs. 合成監控: 合成監控和真實使用者監控 (RUM) 是兩種用於監控和提供 Web 效能洞察的方法。RUM 和合成監控提供不同的效能檢視，並具有各自的優點、良好的用例和缺點。RUM 通常最適合理解長期趨勢，而合成監控非常適合迴歸測試和緩解開發過程中較短期的效能問題。在本文中，我們將定義和比較這兩種效能監控方法。
CSS 和 JavaScript 動畫效能: 動畫對於許多應用程式提供愉悅的使用者體驗至關重要。實現 Web 動畫有多種方法，例如 CSS transitions/animations 或基於 JavaScript 的動畫（使用 requestAnimationFrame()）。在本文中，我們將分析基於 CSS 和基於 JavaScript 動畫之間的效能差異。
動畫效能和幀速率: Web 上的動畫可以透過 SVG、JavaScript（包括 <canvas> 和 WebGL）、CSS animation、<video>、動畫 GIF，甚至動畫 PNG 和其他影像型別來完成。動畫 CSS 屬性的效能成本可能因屬性而異，動畫開銷大的 CSS 屬性可能導致卡頓，因為瀏覽器難以達到流暢的幀速率。

初學者教程

MDN Web 效能學習區包含涵蓋效能要點的現代化最新教程。如果您是效能新手，請從這裡開始。

Web 效能的“為什麼”: 本文討論了 Web 效能對可訪問性、使用者體驗和您的業務目標的重要性。
什麼是 Web 效能？: 您知道 Web 效能很重要，但哪些因素會影響 Web 效能以及如何衡量它呢？本文介紹了效能的組成部分，從網頁載入和渲染（包括您的內容如何進入使用者瀏覽器以供檢視）到我們在考慮效能時需要考慮的人群。
使用者如何感知效能？: 比您的網站快幾毫秒更重要的是，您的使用者感知您的網站有多快。這些感知受實際頁面載入時間、空閒時間、對使用者互動的響應能力以及滾動和其他動畫的流暢度影響。在本文中，我們將討論各種載入指標、動畫和響應指標，以及在不改變實際時間的情況下提升使用者感知的最佳實踐。
測量效能: 現在您已經瞭解了一些效能指標，我們將深入探討效能工具、指標和 API，以及如何將效能融入 Web 開發工作流程。
多媒體：影像: Web 效能最容易實現的目標通常是媒體最佳化。根據每個使用者代理的功能、大小和畫素密度提供不同的媒體檔案是可能的。在本文中，我們將討論影像對效能的影響，以及減少每個影像傳送位元組數的方法。
多媒體：影片: Web 效能最容易實現的目標通常是媒體最佳化。在本文中，我們將討論影片內容對效能的影響，並介紹一些技巧，例如從背景影片中刪除音軌可以提升效能。
JavaScript 效能最佳化: JavaScript，如果使用得當，可以提供互動式和沉浸式的 Web 體驗——否則它可能會顯著損害下載時間、渲染時間、應用內效能、電池壽命和使用者體驗。本文概述了一些應考慮的 JavaScript 最佳實踐，以確保即使是複雜的內容也儘可能高效。
HTML 效能最佳化: 您的標記中的某些屬性和源順序可能會影響網站的效能。透過最小化 DOM 節點的數量，確保使用最佳順序和屬性來包含樣式、指令碼、媒體和第三方指令碼等內容，您可以顯著提升使用者體驗。本文詳細探討了如何使用 HTML 來確保最大效能。
CSS 效能最佳化: CSS 可能不是提升效能的更重要的最佳化重點，但有些 CSS 功能比其他功能對效能影響更大。在本文中，我們將探討一些影響效能的 CSS 屬性，並提出處理樣式的方法，以確保效能不會受到負面影響。
Web 效能的商業案例: 開發者可以做很多事情來提升效能，但是多快才足夠快呢？如何說服決策者這些努力的重要性？一旦最佳化，如何確保臃腫不會再次出現？在本文中，我們將探討說服管理層、培養效能文化和效能預算，並介紹確保效能退化不會悄悄進入您的程式碼庫的方法。
Web 效能最佳實踐和技巧: 本文在基本層面上涵蓋了幾個主題，並提供了深入探討的連結，以提升每個主題的效能。除了 HTML、CSS、JavaScript 和媒體檔案等前端主題外，它還涵蓋了與 Web 效能相關的 API、開發人員工具、最佳實踐和不良實踐。

Performance APIs

效能 API 是一組用於衡量 Web 應用程式效能的標準。以下頁面提供了效能 API 的概述，包括如何使用它們的資訊。

高精度計時: 效能 API 允許進行高精度測量，這些測量基於潛在的亞毫秒級解析度時間，並使用穩定的單調時鐘，不受系統時鐘偏差或調整的影響。高解析度計時器對於準確的基準測試是必需的，而不是精度較低且非單調的 Date 時間戳。
長動畫幀計時: 長動畫幀（LoAF）會影響網站的使用者體驗。它們可能導致使用者介面 (UI) 更新緩慢，從而導致控制元件似乎無響應，以及卡頓（或不流暢）的動畫效果和滾動，從而導致使用者沮喪。長動畫幀 API 允許開發人員獲取有關長動畫幀的資訊，並更好地瞭解其根本原因。本文展示瞭如何使用長動畫幀 API。
監控 bfcache 阻止原因: PerformanceNavigationTiming.notRestoredReasons 屬性報告了當前文件在導航時被阻止使用 bfcache 的原因。開發人員可以使用此資訊來識別需要更新以使其與 bfcache 相容的頁面，從而提升網站效能。
導航計時: 導航計時透過 PerformanceNavigationTiming API 提供與從一個頁面導航到另一個頁面相關的指標。例如，您可以確定載入或解除安裝文件所需的時間，或者記錄直到 DOM 構造完成並且可以與 DOM 互動所需的時間。
效能資料: Performance API 不提供效能資料分析或視覺化。但是，Performance API 與開發人員工具整合良好，其資料通常傳送到分析端點和庫以記錄效能指標，這有助於您評估資料以找到影響使用者的效能瓶頸。此頁面概述了哪些型別的 Performance API 資料存在、如何收集以及如何訪問它們。
資源計時 API: 資源計時允許檢索和分析應用程式資源載入的詳細網路計時資料。應用程式可以使用計時指標來確定，例如，載入特定資源（如影像或指令碼）所需的時間，無論是作為頁面載入的一部分隱式載入還是透過 JavaScript 顯式載入，例如使用 fetch() API。
伺服器計時: Server-Timing 允許伺服器將關於請求-響應週期的指標傳達給使用者代理。您可以收集此資訊並以與 Performance API 處理所有其他指標相同的方式對伺服器端指標採取行動。
使用者計時 API: 使用使用者計時 API 的“標記”和“測量”入口型別，使用屬於瀏覽器效能時間線的高精度時間戳建立應用程式特定的時間戳。