22

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

希望有一些帮助最小化这些

空空间

4

2 回答 2

17

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

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

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

于 2013-08-20T11:50:39.003 回答
1

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

  1. 最重要的是——chrome devtools 成本很高。A mean A LOT，即使它什么也没说。例如：
  2. 在我的情况下，性能监视器中的“屏幕截图”将帧时间从 16 毫秒增加到 66 毫秒，并且只是用时间轴中的空白空间填充它 -没有屏幕截图和屏幕截图。（现在我看到 GPU 上的长时间操作带有屏幕截图，但没有任何关于特定操作的具体操作的信息）
  3. “渲染”工具中的东西，如“油漆闪烁”或“fps Meter”，大大增加了绘画操作时间。请确保在分析性能之前禁用所有这些！
  4. “其他”片段（时间轴上的灰色）发生了非常奇怪的事情。它假设是 devtools 本身的成本，但有时它可以随机地在零附近进行大量计算，或者处于 100% 空闲状态。我的建议 - 在新的 chrome 版本中有新的“性能监视器”工具（不是简单的“性能”）。最好将其打开并密切关注“CPU 使用率”时间线。如果您看到灰色曲线的意外行为，只需重新加载页面或整个 chrome - 它可能会为您节省大量时间。
  5. 某些扩展可能会对时间线造成随机影响。最好也禁用它。
  6. 实际上，工具或扩展中的任何东西都可能会破坏您的测量。在开始搜索代码、dom 或样式中的问题之前将其全部关闭
于 2018-03-01T04:52:24.027 回答