请解释如何使用 Long Tasks API 监测长任务？

推荐答案

// www.javascriptcn.com code example
// 使用 PerformanceObserver 监听长任务
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Long task detected:', entry);
  }
});

// 开始观察长任务
observer.observe({ entryTypes: ['longtask'] });

本题详细解读

什么是 Long Tasks API？

Long Tasks API 是浏览器提供的一个性能监测工具，用于检测执行时间超过 50 毫秒的任务。这些任务通常会影响页面的响应性和用户体验，因此监测它们有助于优化页面性能。

如何使用 Long Tasks API？

1. 创建 PerformanceObserver 实例：首先，你需要创建一个 PerformanceObserver 实例，并传入一个回调函数。这个回调函数会在检测到长任务时被调用。

2. 指定观察的 entryTypes：在调用 observe 方法时，你需要指定 entryTypes 为 ['longtask']，这样 PerformanceObserver 就会开始监听长任务。

3. 处理长任务信息：在回调函数中，你可以通过 list.getEntries() 获取到所有检测到的长任务信息。每个长任务都会包含以下关键信息：

   • name：任务的名称。
   • duration：任务的持续时间（以毫秒为单位）。
   • startTime：任务开始的时间（相对于页面加载的时间）。
   • attribution：任务的来源信息（如脚本、渲染等）。

示例代码

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Long task detected:', entry);
  }
});

observer.observe({ entryTypes: ['longtask'] });

注意事项

• 兼容性：Long Tasks API 在现代浏览器中得到广泛支持，但在一些旧版浏览器中可能不可用。在使用前，建议检查浏览器的兼容性。
• 性能影响：虽然 PerformanceObserver 本身对性能影响较小，但在处理大量长任务时，仍需注意回调函数的执行效率，避免引入额外的性能问题。

通过 Long Tasks API，开发者可以有效地监测和优化页面中的长任务，从而提升用户体验。