效能衡量
衡量效能提供了一個重要的指標，可以幫助您評估應用、網站或 Web 服務的成功程度。
例如，您可以使用效能指標來確定您的應用與競爭對手相比的表現，或者比較您的應用在不同版本中的效能。您的指標應與您的使用者、網站和業務目標相關。應以非技術利益相關者可以理解和利用的格式，對它們進行一致地收集、測量和分析。
本文介紹了可用於訪問 Web 效能指標的工具，這些指標可用於衡量和最佳化網站的效能。
| 先決條件 | 已安裝基本軟體，並具備客戶端 Web 技術的基本知識。 |
|---|---|
| 目標 |
提供有關 Web 效能指標的資訊，您可以透過各種 Web 效能 API 收集這些資訊，並可以使用工具來視覺化這些資料。 |
效能工具
有多種不同的工具可用於幫助您衡量和改進效能。這些工具通常可以分為兩類
- 指示或衡量效能的工具，例如PageSpeed Insights或 Firefox 的網路監控器和效能監控器。這些工具向您展示了網站載入的速度快慢。它們還指出了可以改進以最佳化 Web 應用的區域。
- 效能 API，您可以使用它來構建自定義效能工具。
通用效能報告工具
像PageSpeed Insights這樣的工具可以提供快速的效能測量。您可以輸入 URL 並立即獲得性能報告。該報告包含分數，指示您的網站在移動裝置和桌上型電腦上的效能。這是瞭解您做得好的地方以及可以改進的地方的一個良好起點。
在撰寫本文時，MDN 的效能報告摘要看起來類似於以下內容
效能報告包含有關諸如使用者必須等待多長時間才能在頁面上顯示任何內容、顯示頁面需要下載多少位元組以及更多資訊。它還會讓您知道測量的值是否被認為是好是壞。
webpagetest.org是另一個自動測試您的網站並返回有價值指標的工具示例。
您可以嘗試透過這些工具執行您最喜歡的網站，並檢視分數。
網路監控工具
現代瀏覽器提供了可用於針對載入的頁面執行並確定其效能的工具；大多數工具的工作方式類似。例如，Firefox 的網路監控器返回有關從網路下載的所有資產的詳細資訊，以及一個瀑布時間圖，顯示每個資產下載需要多長時間。
您還應該檢視Chrome 的網路監控器文件。
效能監控工具
您還可以使用瀏覽器效能工具（例如Firefox 效能監控器）來衡量 Web 應用或網站使用者介面在執行不同操作時的效能。這指出了可能導致 Web 應用或網站速度變慢的功能。
另請參閱Chrome 的效能工具文件。
效能 API
在為 Web 編寫程式碼時，可以使用許多Web API來建立自己的效能測量工具。
您可以使用導航計時 API來衡量客戶端 Web 效能，包括解除安裝前一個頁面所需的時間、域名查詢花費的時間、執行視窗載入處理程式的總時間等等。您可以將該 API 用於與下圖中所有導航事件相關的指標。
效能 API提供對當前頁面的效能相關資訊的訪問，包括幾個 API，例如導航計時 API、使用者計時 API和資源計時 API。這些介面允許精確測量 JavaScript 任務完成所需的時間。
PerformanceEntry 物件是效能時間線的一部分。效能條目可以透過在應用程式的顯式點建立效能mark或measure（例如透過呼叫mark()方法）來直接建立。效能條目也會以間接方式建立，例如載入影像之類的資源。
PerformanceObserver API可用於觀察效能測量事件，並在瀏覽器效能時間線上記錄新的效能條目時通知您。
雖然本文沒有深入探討使用這些 API 的內容，但瞭解它們的存在很有幫助。請參閱導航和計時文章以獲取使用效能 Web API 的更多示例。