Chrome Performance DevTools 中不明确的“任务”

Question

Chrome 在查看我的给定网页时表现出巨大的延迟。我正在使用 DevTools Performance 选项卡来尝试找到罪魁祸首，我认为它就在我的 JavaScript 代码中的某个地方。

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

Answer 1

我遇到了类似的问题，我有很长的、不透明的“任务”，需要几秒钟，而开发工具中没有更多信息。

Chrome 开发人员向我推荐了Perfetto（编辑：或者您可以在 chrome://tracing 访问内置的类似工具）。 Perfetto 可让您记录 Chrome 内部的痕迹。就我而言，我怀疑这与 GPU 相关，因此我启用了所有 GPU* 开关：

并开始我的追踪。在另一个选项卡中重现该问题后，我返回到 Perfetto 跟踪。我发现这些“ThreadControllerImpl::RunTask”切片似乎与神秘系统任务的持续时间有关。

Perfetto 有一个从该任务到另一组“切片”的箭头，很有帮助。

其中每一个都被归类为“webaudio”。从那里我了解到我对 AudioContext 的使用可能是罪魁祸首，事实上，如果我禁用页面上的所有音频，问题就会消失。

希望这个示例能够向其他尝试解决 Chrome 中不透明“系统任务”问题的人提供说明。

Answer 2

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

精确代码 -

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

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

更多详情这里