Performance APIs

注意:此功能在 Web Workers 中可用。

性能 API 是一组用于衡量 Web 应用程序性能的标准。

概念与用法

为了确保 Web 应用程序的快速运行,衡量和分析各种性能指标非常重要。性能 API 提供了重要的内置指标,并允许您将自己的测量添加到浏览器的性能时间线中。性能时间线包含高精度的时间戳,并可以在开发者工具中显示。您还可以将数据发送到分析端点,以便随时间记录性能指标。

每个性能指标都由一个单独的 PerformanceEntry 对象表示。性能条目具有 namedurationstartTimetype 属性。所有性能指标都继承自 PerformanceEntry 接口并对其进行进一步限定。

大多数性能条目会在您不进行任何操作的情况下自动记录,然后可以通过 Performance.getEntries() 或(更推荐)通过 PerformanceObserver 访问。例如,对于执行时间超过设定阈值的事件,会记录 PerformanceEventTiming 条目。但性能 API 也允许您使用 PerformanceMarkPerformanceMeasure 接口来定义和记录自己的自定义事件。

主要的 Performance 接口在 WindowWorker 全局作用域中都可用,它允许您添加自定义性能条目、清除性能条目以及检索性能条目。

PerformanceObserver 接口允许您在各种类型的性能条目被记录时监听它们。

有关更多概念性信息,请参阅下面的 性能 API 指南

UML diagram of Performance APIs

参考

性能 API 中包含以下接口:

EventCounts

performance.eventCounts 返回的只读映射,包含按事件类型分派的事件数量。

LargestContentfulPaint

衡量视口内可见的最大图像或文本块的渲染时间,记录从页面首次开始加载时算起。

LayoutShift

提供对网页布局稳定性的洞察,基于页面上元素的移动。

LayoutShiftAttribution

提供有关已移动元素的调试信息。

NotRestoredReasonDetails

表示页面因某个原因而无法使用后退/前进缓存(bfcache)的单个原因。

NotRestoredReasons

提供报告数据,包含当前文档在导航时被阻止使用后退/前进缓存(bfcache)的原因。

性能

访问性能测量的主接口。通过 Window.performanceWorkerGlobalScope.performance 在窗口和 worker 上下文中可用。

PerformanceElementTiming

测量特定元素的渲染时间戳。

PerformanceEntry

性能时间线上的一个条目,封装了单个性能指标。所有性能指标都继承自此接口。

PerformanceEventTiming

测量事件和下次绘制交互(INP)的延迟。

PerformanceLongAnimationFrameTiming

提供有关占用渲染并阻止其他任务执行的长动画帧(LoAFs)的指标。

PerformanceLongTaskTiming

提供有关占用渲染并阻止其他任务执行的长任务的指标。

PerformanceMark

自定义标记,用于您在性能时间线上的自定义条目。

PerformanceMeasure

在两个性能条目之间进行自定义时间测量。

PerformanceNavigationTiming

测量文档导航事件,例如加载文档所需的时间。

PerformanceObserver

监听性能时间线中新记录的性能条目。

PerformanceObserverEntryList

性能观察器观察到的条目列表。

PerformancePaintTiming

测量网页构建过程中的渲染操作。

PerformanceResourceTiming

测量网络加载指标,例如图像、脚本、fetch 调用等资源的重定向开始和结束时间、fetch 开始时间、DNS 解析开始和结束时间、响应开始和结束时间。

PerformanceScriptTiming

提供导致长动画帧(LoAFs)的单个脚本的指标。

PerformanceServerTiming

暴露随响应一起发送的服务器指标,这些指标位于 Server-Timing HTTP 头部中。

TaskAttributionTiming

识别任务类型以及负责长任务的容器。

VisibilityStateEntry

测量页面可见性状态更改的时间,即选项卡从前台变为后台或反之亦然的时间。

指南

以下指南将帮助您理解性能 API 的关键概念并概述其功能:

规范

规范
Element Timing API
事件计时 API
高精度时间
最大内容绘制
布局不稳定 API
Long Tasks API
导航计时 Level 2
绘制时序
性能时间线
资源时序
服务器计时
用户计时
Long Animation Frames API
内存测量 API
HTML
# the-visibilitystateentry-interface
HTML
# the-notrestoredreasons-interface

另见