Performance Web inspector配置文件，带有；框架：在时间线中未显示任何内容时查找性能问题的原因

我刚刚观看了谷歌I/O会议，演讲者们解释了如何在ChromeWebInspector时间线中使用新的“框架”视图

下面是我在开发页面上滚动时得到的一个示例记录：

正如您所看到的，在一些帧中存在巨大的延迟，但在时间轴中没有任何明显的原因（黄色“计时器触发”事件之间有很大的间隔）。如何解决性能问题以持续提高帧速率？

我建议您使用

它将基本上向您显示加载页面时发生的事情的完整细节，以便您知道在哪里工作。。。（我也认为在某些情况下可能会遗漏某些信息）

---

此外，您还应该对页面进行内存分析，以查看某些对象加载到内存中所需的时间。

您的示例看起来还不错。您的代码运行速度很快，浏览器将仅以60fps的速度渲染，因此它会花费一些时间（最多16ms）等待下一个渲染周期

下面是Chrome开发工具时间轴面板框架视图中一个特别令人担忧的快照

根据报告：

• 灰色区域表示DevTools未检测到的活动，Chrome团队努力使该区域尽可能小
• 清除区域表示显示刷新周期之间的空闲时间，这通常不是问题，尤其是当该区域达到60fps时，因为这只是Chrome等待在监视器的vsync上传送帧

条形图底部的黄色和绿色区域非常小，表示事件处理、绘制和合成都运行得非常快——速度足够快，可以落在表示30fps阈值的水平线下，并且在大多数情况下可能快于60fps阈值（未显示线）

要了解更多信息，请打开“开发工具”选项并选中：

启用此选项后，您将在“记录”栏中看到灰色区域：

每个灰色区域显示渲染器线程被占用的时间段。如果您看到许多漏洞，那么浏览器可能是GPU绑定的

Chrome工程师Nat Duca在以下方面提供了更多信息：

GPU有界性通常来自两个方面：

具有-webkit过滤器，在元素上保留3d属性。那些在gpu上吃东西就像。。。嗯，饿了

有太多的大层

层？“显示合成层边框”以查看它们。大多数人遇到麻烦的地方不是层数，而是层的面积

经验法则：大多数电脑的设计使它们可以触摸主屏幕上的每个像素大约4次。作为一个非常简单的例子，一台2年的MacBook Air电脑是根据其LCD的尺寸配置的。当你插入一个有多个层的30英寸显示器时，它开始绑定GPU

这有什么关系？[Handwaving，]当我们绘制屏幕时，一个层只接触一个像素。如果一个层的大小与您的窗口相同，例如，您的宽度=100%高度=100%div，使用-webkit transform:translateZ（0），然后触摸屏幕上的每个像素一次。因此，计算图层的面积，如果超过显示器面积的4倍，您可能无法进入太空[因为您受GPU限制]

对gpu有界性的一个很好的测试是将每个维度的窗口大小缩小1/2。如果事情进展缓慢，则会发生其他事情……如果事情进展得更快，则可能是你碰到了gpu

---

在我的情况下（如最上面的图片所示），我仍在试图找出导致灰色条的原因。代码没有改变，性能过去也很好。可能是新版本的Chrome（今天我运行的是31.0.1650.57 m）由于某些原因，此代码的性能不太好。同样，灰色区域表示渲染线程正忙于处理未显示的代码，因此很难判断发生了什么情况。

这是什么版本的Chrome？我有20.0.1132.57，在时间线选项卡下看不到帧部分。现在我在22（开发频道）.不确定它是否在21中。我使用了一些页面速度–在我看来，Chrome已经慢慢地将所有页面速度功能直接集成到Web Inspector中。该扩展很有用，但我认为它不能提供更多关于这种特殊情况的见解。页面速度很好，但它更注重快速加载页面，而reas上面显示的时间线与页面运行期间发生的操作有关，可能是对用户事件或动画计时器的响应。在新的ChromeDev tools时间线UI（无帧视图）中，这种现象会是什么样子？这会导致吗？我开始认为我也是GPU绑定的，但我在不同的机器/操作系统上看到了这种行为。