javascript - Chrome DevTools 时间轴 : Frame View appears inconsistent with Records chart

Question

我正在尝试理解 Chrome DevTools Timeline标签。

我在我的网页中记录了一些事件 - 这是输出的屏幕截图:

请注意顶部的“垂直条形图”，我选择了一根柱的时间范围，它与一帧相关。酒吧几乎完全是绿色的(意味着大部分时间都花在“绘画”上)。
中间的图表显示了很多黄色，如果我展开底部黄色宽条旁边的小箭头，我可以看到它也包含一些紫色。

中间图表底部的宽“空绿色条”在底部饼图中似乎已被忽略。我猜这与它是一个单独的线程这一事实有关。底部饼图只考虑主线程是真的吗？

如果是这样，那么底部的 2 个图表 - 水平条和饼图 - 看起来是一致的。
我不明白的是为什么上面的图显示几乎所有的“绿色”，这似乎与其他图不一致。
我在这里缺少什么？

Answer 1

您看到的空绿色条可能表示以下几点:

1. 正如您所说，Javascript 渲染的主线程正忙于处理其他事情。

2. 当时 GPU 非常忙，跟不上 - 这通常可能是由页面使用的各种 CSS 过滤器或其他视觉效果引起的。

   <

尝试在时间线内启用“CPU 事件”功能。

至于饼图中出现的空绿色条，我不确定它是否应该在那里。