本文翻译自MDN。
web性能的衡量
衡量性能提供了一个重要的指标来帮助您评估应用程序、站点或 Web 服务的成功。
例如,您可以使用性能指标来确定您的应用程序如何执行与竞争对手相比,或者您可以比较您的应用程序的性能跨版本。您选择度量的指标应该与您的用户、站点和业务目标相关。应该以一致的方式收集和测量它们,并以非技术涉众可以使用和理解的格式进行分析。
本文介绍了 Web 性能指标,您可以使用这些指标来衡量和优化站点的性能。
Performance APIs
在为 Web 编写代码时,可以使用大量的 Web API 来创建自己的性能度量工具。
您可以使用导航定时 API 来衡量客户端 Web 性能; 包括卸载前一页所需的时间、域查找所需的时间、执行窗口的加载处理程序所花的总时间等等。您可以将 API 用于与下图中显示的所有导航事件相关的度量。
Performance API 提供对当前页的性能相关信息的访问,包括 Performance Timeline API、导航计时 API、用户计时 API 和资源计时 API。这些接口允许精确测量 JavaScript 任务完成所需的时间。
PerformanceEntry 对象是性能时间线的一部分。性能条目可以通过在应用程序的显式点上创建性能标记或度量(例如通过调用 mark ()方法)来直接创建。性能条目也是以间接的方式创建的; 例如加载资源,比如图像。
PerformanceObserver API 可以用来观察性能测量事件,当新的性能条目记录在浏览器的性能时间表中时,它可以通知您。
虽然本文不深入讨论如何使用这些 API,但了解它们的存在是很有用的。您还可以参考导航和计时文章,以获得有关使用性能 WebAPI 的进一步示例。
Tools and metrics
有许多不同的工具可以帮助您提高性能。一般可分为两类:
- 指示或衡量性能的工具,例如 PageSpeed Insights 或 Firefox Network Monitor 和 Performance Monitor。这些工具可显示 Web 应用或网站加载的速度或速度。它们还指示可以改进以优化 Web 应用的区域。
- 用于更新代码以使您的 Web 应用或网站性能更好的工具。例如,捆绑工具将代码打包到单个文件中,以减少 HTTP 请求的数量,或者从代码中删除所有空格以使文件变小的缩微器。
我们将在本课程中讨论这两个类别。除了讨论性能指标,我们当然还会讨论用来衡量网站性能是否有所提高的指标。
General performance reporting tools
像 PageSpeed Insights 这样的工具可以衡量网站的性能。您可以输入一个 URL 并在几秒钟内得到一个性能报告。该报告包含有关您的网站如何执行的分数,无论是在移动和桌面。这是一个很好的开始,让你了解你已经做得很好的地方和可以改进的地方。
在撰写本文时,MDN 的业绩报告摘要与下列内容类似:
性能报告包含诸如用户在页面上显示任何内容之前需要等待多长时间、显示页面需要下载多少字节等信息。它还让您知道测量值被认为是好的还是坏的。
Webpagetest.org 是自动测试站点并返回有用指标的工具的另一个例子。
现在试着在 webpagetest.org 和 PageSpeed Insights 上运行你最喜欢的网站,看看得分是多少。
Network tools
大多数浏览器都有可用的工具,您可以使用这些工具来对加载的页面运行并确定它们的执行情况。例如,Firefox 网络监视器返回从网络下载的所有资产的详细信息,以及显示每个资产下载所用时间的时间图。
当您执行不同的操作时,您还可以使用 Performance Monitor 来度量 Web 应用程序或站点的用户界面的性能。这表明可能会减慢你的网络应用程序或网站的功能。
Conclusion
本文提供了 Web 性能指标的简要概述,以帮助您了解在 Web 应用程序或站点上可以衡量什么。接下来,您将了解感知性能和一些技术,以使不可避免的性能损害对用户显得不那么严重,或者完全掩盖它们。