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

Question

我刚刚观看了Google I/O会话Jank Busters:构建Performant Web Apps,其中发言者解释了如何在Chrome Web检查器时间轴中使用新的"框架"视图.

这是我在正在开发的页面上滚动时获得的示例录制:

正如您所看到的,某些帧中存在巨大延迟但在时间线中没有任何明显原因(黄色"Timer Fired"事件之间存在较大差距).如何解决性能问题以便始终如一地提高帧速率？

Answer 1

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

以下是Chrome Dev Tools 时间轴面板的Frames视图中特别令人担忧的快照.

根据文件:

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

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

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

启用此功能后,您将在"RECORDS"栏中看到灰色区域:

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

Chrome上的工程师Nat Duca在这篇文章中提供了更多信息:

GPU的界限通常来自两件事:

1. 使用-webkit-filter,在元素上保留三维属性.那些吃掉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

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

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