Chrome 性能 DevTools 中不明确的“任务”

Posted 2023-03-07

【中文标题】Chrome 性能 DevTools 中不明确的“任务”

【英文标题】：Inexplicit 'task' in Chrome Perfomance DevTools

【发布时间】：2019-10-13 05:58:06

【问题描述】：

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

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

【问题讨论】：

我也有同样的问题。 Chrome 中显然存在一个错误，实际上是一个回归（我几天前开始观察这个问题）。就我而言，这发生在我的 JS 降低页面顶部节点的高度之后，导致页面的整个其余部分向上移动。这会立即发生（正如您所期望的那样，因为所有内容只需要向上移动而内部没有变化）并且没有花费大量时间在布局上；然而，几毫秒后，像你这样的长任务消耗 100% CPU 大约 3 秒，在 devTools 中关于它在做什么和触发它的细节绝对为零。

请为这些铬问题加注星标：bugs.chromium.org/p/chromium/issues/detail?id=967211bugs.chromium.org/p/chromium/issues/detail?id=967217

@KayceBasques 如果您正在与 OP 交谈，从他的屏幕截图中可以清楚地看到 JavaScript 采样未被禁用（您可以在其他任务上看到彩色条纹，除了问题/问题是关于）。就我而言，我已经仔细检查过，也没有禁用它。

这个问题是being discussed on meta。

在我的代码中找到原因，继续话题：***.com/questions/56472959/…

【参考方案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

【讨论】：

不幸的是，这仅向我显示了与 Profiler 选项卡相同的信息，这并不是特别有用：。我所有的条目都有attribution: [ name: "unknown" ]。