Chrome DevTools时间轴：框架视图与记录图表不一致

Question

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

我在网页上录制了一些活动 - 这是输出的屏幕截图：

注意顶部＆＃34;垂直条形图＆＃34;我选择了一个条形的时间范围，它与一个框架相关联。酒吧几乎完全是绿色的（这意味着大部分时间花在＃34;绘画＆＃34;） 中间的图表显示了很多黄色，如果我展开底部宽黄色条旁边的小箭头，我可以看到它也包含一些紫色。

宽阔的空白栏＆＃34;在中间图的底部，似乎在底部饼图中被忽略。我猜这与它是一个单独的线程这一事实有关。底部饼图只考虑主线程吗？

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

Answer 1

您看到的空绿条可能意味着一些事情：

1. 正如你所说，Javascript渲染的主要线程正忙于处理其他内容。

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

尝试在时间轴中启用“CPU活动”功能。

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