如何正确理解devtools时间表？

Question

我的问题是关于Chrome DevTools，特别是我对时间线标签有疑问。 因此，我已多次阅读，我的浏览器必须以60fps的速度渲染我的像素。有时虽然它有一些繁重的JS执行并阻止60fps发生。此外，如果我有一些CSS和JS导致重新计算和重新绘制DOM树（部分或完整树），一帧也可能需要超过16毫秒。这是我们的应用程序中这么长帧的图片：

好的，在这里我可以清楚地看到，两个请求需要花费很多时间（192毫秒+14毫秒），浏览器无法绘制60fps，并且它甚至无法接近。

虽然这是另一张图片：

所以现在好多了。 现在它是~42fps。但现在我无法理解为什么......

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

在此框架中有12个这样的“事件”。其中10个甚至不到0.30ms，所以如果我总结它们肯定会少于16ms（3.57，如果我算的正确），但Chrome说这帧是23.9ms。

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

我在这里有点困惑，因为我在审查时间表时肯定会遗漏一些事情。所以，请给我一些详细的解释或一些关于如何摆脱这些“垃圾”以及如何检测它们的详细教程。虽然我已经阅读了几篇文章并且几乎完成了Udemy关于演奏的课程，但我仍然很困惑......

谢谢

Answer 1

我怀疑有＆＃34;本地＆＃34;在该开放空间中执行的代码，时间轴不会报告。

您可能想尝试使用＆＃34;个人资料＆＃34;开发工具中的选项卡来取代CPU配置文件。这将显示＆＃34;（程序）＆＃34;这是正在执行的原生Chrome代码。这可能至少是弄清楚发生了什么的开始。

时间轴显示右侧的白色间隙： can be c/c

Profiler显示（程序）和垃圾收集＆＃34;（g ... r）＆＃34;发生在那里

如果有一大块＆＃34;（程序）＆＃34;在那里，我认为你可以使用chrome：// tracing选项卡，它将显示正在进行的所有本机/内部事务：