测量性能
衡量性能提供了重要的指标，帮助您评估您的应用程序、网站或 Web 服务的成功程度。
例如，您可以使用性能指标来确定您的应用程序与竞争对手相比的性能如何，或者比较您应用程序在不同发布版本之间的性能。您的指标应与您的用户、网站和业务目标相关。它们应以非技术利益相关者能够理解和接受的格式进行收集、一致地衡量和分析。
本文介绍了可用于访问 Web 性能指标的工具，这些工具可用于衡量和优化您网站的性能。
| 预备知识 | 已安装基本软件，并具备 客户端 Web 技术 的基础知识。 |
|---|---|
| 目标 |
提供可通过各种 Web 性能 API 收集的 Web 性能指标信息，以及可用于可视化这些数据的工具。 |
性能工具
有几种不同的工具可帮助您衡量和改进性能。这些通常可以分为两类：
- 指示或衡量性能的工具，例如 PageSpeed Insights 或 Firefox 的 Network Monitor 和 Performance Monitor。这些工具向您展示您的网站加载速度有多快或有多慢。它们还指出了可以改进以优化您的 Web 应用程序的领域。
- 可用于构建自定义性能工具的 Performance APIs。
通用性能报告工具
PageSpeed Insights 等工具可以提供快速的性能测量。您可以输入一个 URL，并在几秒钟内获得性能报告。该报告包含指示您的网站在移动设备和桌面设备上表现如何的分数。这是了解您做得好的地方和可以改进的地方的一个很好的起点。
在撰写本文时，MDN 的性能报告摘要如下所示：
性能报告包含有关以下方面的信息：用户在页面显示任何内容之前需要等待多长时间，显示页面需要下载多少字节，以及更多信息。它还告诉您测得的值被认为是好还是坏。
webpagetest.org 是另一个自动测试您的网站并返回有价值指标的工具示例。
您可以尝试运行您喜欢的网站并使用这些工具，查看得分。
网络监控工具
现代浏览器提供了可用于在已加载页面上运行并确定其性能的工具；大多数工具的工作方式类似。例如，Firefox 的 Network Monitor 返回有关从网络下载的所有资源的详细信息，以及一个瀑布式时间图，显示每个资源下载所花费的时间。
您还应该查看 Chrome 的 Network Monitor 文档。
性能监控工具
您还可以使用浏览器性能工具，例如 Firefox Performance Monitor，在执行不同操作时测量 Web 应用程序或网站用户界面的性能。这可以指示可能导致您的 Web 应用程序或网站变慢的功能。
Performance APIs
在为 Web 编写代码时，许多 Web API 可用于创建您自己的性能衡量工具。
您可以使用 Navigation Timing API 来衡量客户端 Web 性能，包括卸载前一个页面所需的时间、域名查找花费的时间、执行窗口 load 处理程序所花费的总时间等等。您可以使用该 API 获取与下方图表中所有导航事件相关的指标。
提供对当前页面性能相关信息访问的 Performance API，包括几个 API，例如 Navigation Timing API、User Timing API 和 Resource Timing API。这些接口允许精确测量 JavaScript 任务完成所需的时间。
PerformanceEntry 对象是性能时间线的一部分。通过在应用程序的显式点创建性能mark 或measure（例如，通过调用 mark() 方法）可以直接创建性能条目。性能条目也可以通过间接方式创建，例如加载图像等资源。
可以使用 PerformanceObserver API 来观察性能测量事件，并在浏览器性能时间线上记录新的 性能条目时通知您。
虽然本文没有深入介绍如何使用这些 API，但了解它们的存在是有帮助的。有关使用性能 Web API 的更多示例，请参阅 Navigation and timings 文章。
总结
本文简要概述了一些可帮助您在 Web 应用程序或网站上衡量性能的工具。在下一篇文章中，我们将探讨如何优化网站上的图像以提高其性能。