Web开发性能测量工具与API详解

Web开发性能测量工具与API详解

在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的更多示例。

结语

本文简要介绍了Web性能指标，以帮助你了解可以在Web应用程序或网站上测量的内容。接下来，你将了解如何优化网站上的图片以优化其性能。