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

【问题标题】：Inexplicit 'task' in Chrome Perfomance DevToolsChrome 性能 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=967211 bugs.chromium.org/p/chromium/issues/detail?id=967217
@KayceBasques 如果您正在与 OP 交谈，从他的屏幕截图中可以清楚地看到 JavaScript 采样未被禁用（您可以在其他任务上看到彩色条纹，除了问题/问题是关于）。就我而言，我已经仔细检查过，也没有禁用它。
这个问题是being discussed on meta。
在我的代码中找到原因，继续话题：stackoverflow.com/questions/56472959/…

标签： javascript performance google-chrome google-chrome-devtools

【解决方案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" } ]。