概念与用法
为了确保 Web 应用程序的快速运行,衡量和分析各种性能指标非常重要。性能 API 提供了重要的内置指标,并允许您将自己的测量添加到浏览器的性能时间线中。性能时间线包含高精度的时间戳,并可以在开发者工具中显示。您还可以将数据发送到分析端点,以便随时间记录性能指标。
每个性能指标都由一个单独的 PerformanceEntry 对象表示。性能条目具有 name、duration、startTime 和 type 属性。所有性能指标都继承自 PerformanceEntry 接口并对其进行进一步限定。
大多数性能条目会在您不进行任何操作的情况下自动记录,然后可以通过 Performance.getEntries() 或(更推荐)通过 PerformanceObserver 访问。例如,对于执行时间超过设定阈值的事件,会记录 PerformanceEventTiming 条目。但性能 API 也允许您使用 PerformanceMark 和 PerformanceMeasure 接口来定义和记录自己的自定义事件。
主要的 Performance 接口在 Window 和 Worker 全局作用域中都可用,它允许您添加自定义性能条目、清除性能条目以及检索性能条目。
PerformanceObserver 接口允许您在各种类型的性能条目被记录时监听它们。
有关更多概念性信息,请参阅下面的 性能 API 指南。
参考
性能 API 中包含以下接口:
EventCounts-
由
performance.eventCounts返回的只读映射,包含按事件类型分派的事件数量。 LargestContentfulPaint-
衡量视口内可见的最大图像或文本块的渲染时间,记录从页面首次开始加载时算起。
LayoutShift-
提供对网页布局稳定性的洞察,基于页面上元素的移动。
LayoutShiftAttribution-
提供有关已移动元素的调试信息。
NotRestoredReasonDetails-
表示页面因某个原因而无法使用后退/前进缓存(bfcache)的单个原因。
NotRestoredReasons-
提供报告数据,包含当前文档在导航时被阻止使用后退/前进缓存(bfcache)的原因。
性能-
访问性能测量的主接口。通过
Window.performance或WorkerGlobalScope.performance在窗口和 worker 上下文中可用。 PerformanceElementTiming-
测量特定元素的渲染时间戳。
PerformanceEntry-
性能时间线上的一个条目,封装了单个性能指标。所有性能指标都继承自此接口。
PerformanceEventTiming-
测量事件和下次绘制交互(INP)的延迟。
PerformanceLongAnimationFrameTiming-
提供有关占用渲染并阻止其他任务执行的长动画帧(LoAFs)的指标。
PerformanceLongTaskTiming-
提供有关占用渲染并阻止其他任务执行的长任务的指标。
PerformanceMark-
自定义标记,用于您在性能时间线上的自定义条目。
PerformanceMeasure-
在两个性能条目之间进行自定义时间测量。
-
测量文档导航事件,例如加载文档所需的时间。
PerformanceObserver-
监听性能时间线中新记录的性能条目。
PerformanceObserverEntryList-
性能观察器观察到的条目列表。
PerformancePaintTiming-
测量网页构建过程中的渲染操作。
PerformanceResourceTiming-
测量网络加载指标,例如图像、脚本、fetch 调用等资源的重定向开始和结束时间、fetch 开始时间、DNS 解析开始和结束时间、响应开始和结束时间。
PerformanceScriptTiming-
提供导致长动画帧(LoAFs)的单个脚本的指标。
PerformanceServerTiming-
暴露随响应一起发送的服务器指标,这些指标位于
Server-TimingHTTP 头部中。 TaskAttributionTiming-
识别任务类型以及负责长任务的容器。
VisibilityStateEntry-
测量页面可见性状态更改的时间,即选项卡从前台变为后台或反之亦然的时间。
指南
以下指南将帮助您理解性能 API 的关键概念并概述其功能: