我的问题是关于 Chrome DevTools，特别是我对 Timeline 选项卡有疑问。因此，正如我多次阅读的那样，我的浏览器必须以 60fps 的速度渲染我的像素。有时虽然它执行了一些繁重的 JS 并阻止了 60fps 的发生。此外，如果我有一些 CSS 和 JS 导致重新计算和重新绘制 DOM 树（部分或完整树），一帧也可能需要超过 ~16 毫秒。这是我们应用程序中这么长帧的图片：
好的，在这里我可以清楚地看到，两个请求花费了很多时间（192 毫秒 + 14 毫秒），浏览器无法绘制 60 fps，甚至没有接近那里。
虽然这是另一张照片：
所以现在好多了。现在它是~42fps。但现在我不明白为什么..
我有几个“更新图层树”和“绘画”场合。一些鼠标事件，但这里所有的都是 <=1ms。
在这一帧中有 12 个这样的“事件”。其中 10 个甚至小于 0.30 毫秒，所以如果我将它们全部相加，肯定会小于 16 毫秒（如果我计算正确，则为 3.57），但 Chrome 说这个帧是 23.9 毫秒。
为什么时间轴说我这里有垃圾？我应该怎么做才能摆脱它以及如何知道瓶颈在哪里？
我在这里有点困惑，因为我在检查时间线时肯定会错过一些东西。所以请给我一些详细的解释或一些关于如何摆脱这些“垃圾”以及如何检测它们的详细教程。尽管我已经阅读了几篇文章并且几乎完成了 Udemy 关于性能的课程，但我仍然感到困惑..
谢谢
