javascript - 如何正确理解 devtools timeline？

Question

我的问题是关于 Chrome DevTools，具体来说，我有关于时间轴选项卡的问题。因此，正如我读过无数次，我的浏览器必须以 60fps 的速度渲染我的像素。有时虽然它有一些繁重的 JS 执行并阻止 60fps 的发生。此外，如果我有一些 CSS 和 JS 导致重新计算和重新绘制 DOM 树(部分或完整树)，一帧也可能需要超过 ~16 毫秒。这是我们应用程序中这么长的框架的图片:

好的，在这里我可以清楚地看到，两个请求花费了太多时间(192 毫秒 + 14 毫秒)，以至于浏览器无法绘制 60fps 并且它甚至没有接近那里。

虽然这是另一张图片:

所以现在好多了。现在是 ~42fps。但是现在我不明白为什么..

我有几个“更新图层树”和“绘画”的场合。一些鼠标事件，但这里所有的都是 <=1ms。

在这一帧中有 12 个这样的“事件”。其中 10 个甚至小于 0.30 毫秒，所以如果我将它们全部加起来，它肯定会小于 16 毫秒(3.57，如果我计算正确的话)，但是 Chrome 说这个帧是 23.9 毫秒。

为什么 Timeline 说我这里有垃圾？我应该怎么做才能摆脱它以及如何知道瓶颈在哪里？

我在这里有点困惑，因为我在检查时间轴时肯定漏掉了一些东西。所以请给我一些详细的解释或一些关于如何摆脱这些“垃圾”以及如何检测它们的详细教程。虽然我已经阅读了几篇文章并且几乎完成了关于性能的 Udemy 类(class)，但我仍然感到困惑......

谢谢

Answer 1

我怀疑时间线未报告的开放空间中正在执行“ native ”代码。

您可能想尝试使用开发工具中的“配置文件”选项卡来获取 CPU 配置文件。这将显示一个“(程序)”栏，这是正在执行的 native Chrome 代码。这可能至少是弄清楚正在发生的事情的开始。

时间轴在右侧显示白色间隙:

Profiler 显示(程序)和垃圾回收“(g...r)”发生在那里

如果那里有一大块“(程序)”，那么我认为您可以使用 chrome://tracing 选项卡，它会显示所有正在发生的 native /内部内容: