如何正确理解devtools时间表？

Question

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

好的,在这里我可以清楚地看到,两个请求需要花费很多时间(192ms + 14ms),浏览器无法绘制60fps并且它甚至不能靠近那里.

虽然这是另一张图片:

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

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

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

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

我在这里有点困惑,因为我在审查时间表时肯定会遗漏一些东西..所以,请给我一些详细的解释或一些关于如何摆脱这些"帆船"以及如何检测它们的详细教程.虽然我已经阅读了几篇文章并且几乎完成了Udemy关于性能的课程,但我仍然感到很困惑.

谢谢

Answer 1

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

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

时间线在右侧显示白色间隙：

Profiler 显示 (Program) 和垃圾收集“(g...r)”发生在那里

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