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 对象的回调将被调用，其中包含一个 PerformanceLongTaskTiming 对象列表，您可以分析这些对象。

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

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

• TaskAttributionTiming