PerformanceLongTaskTiming

描述

阻塞主线程 50 毫秒或更长时间的长任务会导致（除其他问题外）

• 延迟 可交互时间 (TTI)。
• 输入延迟高/不稳定。
• 事件处理延迟高/不稳定。
• 动画和滚动卡顿。

长任务是指主 UI 线程持续忙碌 50 毫秒或更长时间的任何不间断时段。常见示例包括：

• 长时间运行的事件处理程序。
• 昂贵的重排和重新渲染。
• 浏览器在事件循环不同回合之间执行的、超过 50 毫秒的工作。

长任务是指“罪魁祸首的浏览上下文容器”，简称“容器”，即任务发生的顶层页面、<iframe>、<embed> 或 <object>。

对于不发生在顶层页面内的任务，以及为了确定哪个容器对长任务负责，TaskAttributionTiming 接口提供了 `containerId`、`containerName` 和 `containerSrc` 属性，这些属性可能提供有关任务来源的更多信息。

PerformanceLongTaskTiming 继承自 PerformanceEntry。

实例属性

此接口通过如下限定来扩展以下 PerformanceEntry 属性，以用于长任务计时性能条目类型：

PerformanceEntry.duration 只读 实验性

返回一个 DOMHighResTimeStamp，表示任务开始和结束之间的时间差，精度为 1 毫秒。

PerformanceEntry.entryType 只读 实验性

始终返回 `"longtask"`。

PerformanceEntry.name 只读 实验性

返回以下字符串之一，指明可归因于长任务的浏览上下文或框架：

• "cross-origin-ancestor"（跨源祖先）
• "cross-origin-descendant"（跨源后代）
• "cross-origin-unreachable"（跨源不可达）
• "multiple-contexts"（多个上下文）
• "same-origin-ancestor"（同源祖先）
• "same-origin-descendant"（同源后代）
• "same-origin"（同源）
• "self"（自身）
• "unknown"（未知）

PerformanceEntry.startTime 只读 实验性

返回一个 DOMHighResTimeStamp，表示任务开始的时间。

此接口还支持以下属性：

PerformanceLongTaskTiming.attribution 只读 实验性

返回一个 TaskAttributionTiming 实例的序列。

实例方法

PerformanceLongTaskTiming.toJSON() 实验性

返回 `PerformanceLongTaskTiming` 对象的 JSON 表示形式。

示例

获取长任务

要获取长任务的计时信息，请创建一个 PerformanceObserver 实例，然后调用其 observe() 方法，将 `"longtask"` 作为 type 选项的值传递。您还需要将 `buffered` 设置为 `true`，以便能够访问用户代理在构建文档时缓冲的长任务。然后，`PerformanceObserver` 对象的 callback 将会收到一个 `PerformanceLongTaskTiming` 对象列表，您可以对其进行分析。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe({ type: "longtask", buffered: true });

规范

浏览器兼容性

另见

• TaskAttributionTiming