javascript - Chrome 性能开发工具中的不明确 'task'

Question

在查看我的给定网页时，Chrome 会出现巨大的延迟。我正在使用 DevTools 性能选项卡来尝试找到我认为在我的 JavaScript 代码中某处的罪魁祸首。

以下屏幕截图显示了使用 DevTools 记录的配置文件。对于配置文件中显示的一些“任务”，我可以看到任务正在执行的详细信息(例如，8700 毫秒到 9200 毫秒之间的那个是 GC)，但对于其他任务，则没有任何详细信息，例如我在屏幕截图中突出显示的两个。我如何弄清楚这些任务在做什么？

Answer 1

您可以使用 JavaScript 的性能观察器来了解 Web 应用程序中性能问题的瓶颈。
准确代码 -

const observer = new PerformanceObserver((list) => {
    console.log('Long Task detected! 🚩️');
    const entries = list.getEntries();
    console.log(entries);
});

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

更多详情 here