使用“框架”进行Web检查器分析：在时间轴中没有任何内容时查找性能问题的原因

Question

我刚刚观看了Google I / O会话Jank Busters: Building Performant Web Apps，其中发言人解释了如何使用新的＆＃34;框架＆＃34;在Chrome网络检查员时间轴中查看。

以下是在我正在开发的页面上滚动时获得的示例录制内容：

正如您所看到的，某些帧中存在巨大延迟但在时间线中没有任何明显原因（黄色和＃34之间存在较大间隙;定时器已触发＆＃34;事件）。如何解决性能问题以便始终如一地提高帧速率？

Answer 1

你的例子实际上看起来并不太糟糕。您的代码运行速度很快，浏览器只会以60fps的速度渲染，因此它花费一些时间（最多16ms）等待下一个渲染周期。

以下是Chrome开发者工具时间轴面板 Frames 视图中特别令人担忧的快照。

根据documentation：

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

条形底部的小黄色和绿色区域表明事件处理，绘画和合成都运行得非常快 - 足够快到落在水平线下，表明30fps阈值，并且可能比60fps更快大部分时间都是阈值（行未显示。）

要了解更多信息，请打开开发工具选项并检查：

启用此功能后，您将在“RECORDS”栏中看到灰色区域：

每个灰色区域显示渲染器线程被占用的时段。如果你看到很多差距，那么浏览器很可能受到GPU限制。

Chrome上的工程师Nat Duca在this post中提供了更多信息：

  

GPU有界性通常来自两件事：

     

  
1. 使用-webkit-filter，在元素上保留3D属性。那些在gpu吃掉的东西就像......嗯，饥肠辘辘。
  
2. 有太多大层。
        

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

     经验法则：大多数计算机的设计使其可以触摸主屏幕上的每个像素约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米）与此代码的表现不佳。同样，灰色区域表示渲染线程忙于未经检测的代码，因此很难分辨出发生了什么。

Answer 2

我建议您使用http://pagespeed.googlelabs.com

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

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