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