如何正确理解devtools时间轴？

Question

我的问题是关于Chrome DevTools，具体来说我有关于时间轴选项卡的问题。 因此，正如我读过无数次，我的浏览器必须有60fps的速度渲染我的像素。有时虽然它有一些重JS执行和防止60fps发生。另外，如果我有一些CSS和JS导致重新计算和重新绘制DOM树（部分树或全部树），那么对于一帧，它可能也会花费大于16ms的时间。这里是这样长的帧从我们的应用程序的图片：

好吧，我在这里可以清楚地看到，这两个请求花费如此多的时间（192ms + 14ms）但是，该浏览器不能60fps的油漆它并没有在那里靠得很近。

虽然这里是另一张照片：

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

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

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

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

我在这里有点困惑，因为我绝对错过了检查时间轴的东西。所以请给我一些详细的解释或一些关于如何摆脱这种“垃圾”和如何检测它们的详细教程。虽然我已经读过几篇文章，几乎完成了性能Udemy当然，我仍然感到困惑..

谢谢

Answer 1

我怀疑是有“原生”的代码在开放空间中执行的时间表不报告。

您可能想要尝试使用开发工具中的“配置文件”选项卡来取代CPU配置文件。这将显示一个“（Program）”栏，它是正在执行的本机Chrome代码。这可能至少是开始弄清楚发生了什么。

时间轴显示在右边白色的差距：

探查表明，（方案）和垃圾收集 “（G ... R）” 碰巧有

如果在那里有一大块“（程序）”，那么我认为你可以使用chrome：// tracing选项卡来显示所有本地/内部的东西：