是什么原因导致Chrome时间轴相框有如此多的空白空间

Question

有时当我在谷歌浏览器中检查元素时，我发现我有一些大框架，但它们充满了空白区域。谁知道经常会造成如此大量的空地？我已经看到定时器会导致延长帧长度的问题，但在下面的示例中，我不确定为什么帧会如此之大。

愿意帮助减少这些

Answer 1

这是记录here，请参阅“关于透明或浅灰色框架”部分。有问题的“清晰帧”在那里被描述为

  

显示刷新周期之间的空闲时间。

根据this video，清除条表示浏览器正在等待CPU或GPU。在“标准”网站上工作时，开发人员无法解决这个问题。

Answer 2

我找到了一些有趣的关系，我希望它能为某人节省时间（我花了很多时间才弄清楚所有这些）

1. 最重要的是 - chrome devtools成本很高。即使它没有说明任何事情，也意味着很多。例如：
2. 性能监视器中的“屏幕截图”在我的情况下将帧时间从16ms增加到66ms，并在时间轴中用空格填充它 - without screenshots和with screenshots。 （现在我看到GPU上的长时间操作有截图，但是没有关于具体操作究竟是什么的任何信息）
3. “渲染”工具中的东西，如“油漆闪烁”或“fps米”，大大增加了绘画操作时间。 在分析效果之前，请确保您已禁用所有这些内容！
4. “其他”片段（时间轴上的灰色）会发生非常奇怪的事情。它假设devtools成本本身，但有时它可以通过大量计算随机地大约为零，或者是100％诡计闲置。我的建议 - 新的Chrome版本中有新的“性能监视器”工具（不简单的“性能”）。最好切换它并密切关注“CPU使用”时间表。如果您看到灰色曲线的意外行为只是重新加载页面或整个铬 - 它可能会为您节省大量时间。
5. 某些扩展程序可能会对时间轴造成随机影响。最好也禁用它。
6. 实际上，工具或扩展程序中的任何内容都可能会破坏您的测量。在开始搜索代码，dom或样式中的问题之前，请关闭所有内容