我刚刚观看了 Google I/O 会议Jank Busters：构建高性能 Web 应用程序，演讲者解释了如何在 Chrome Web 检查器时间轴中使用新的“框架”视图。
这是我在正在开发的页面上滚动时得到的示例记录：
如您所见，某些帧存在巨大延迟，但时间线中没有任何明显原因（黄色“Timer Fired”事件之间存在很大差距）。如何解决性能问题以持续提高帧速率？
问问题
3196 次
2 回答
10
您的示例实际上看起来还不错。您的代码运行速度很快，并且浏览器只会以 60fps 的速度渲染，因此它会花费一些时间（最多 16 毫秒）等待下一个渲染周期。
这是 Chrome Dev Tools Timeline面板的Frames视图中的一个特别令人担忧的快照。
根据文档：
- 灰色区域表示 DevTools 未检测到的活动，Chrome 团队努力使该区域尽可能小
- 清晰的区域表示显示刷新周期之间的空闲时间，这通常不是问题，尤其是当该区域达到 60fps 线时，因为这只是 Chrome 等待在显示器的 vsync 上传送帧
条形底部的极小黄色和绿色区域表明事件处理、绘制和合成都运行得非常快——快到足以落在指示 30fps 阈值的水平线之下，并且可能比大多数情况下的 60fps 阈值更快时间（线未显示。）
要了解更多信息，请打开开发工具选项并检查：
启用此功能后，您将在“记录”栏中看到灰色区域：
每个灰色区域显示渲染器线程被占用的时间段。如果您看到许多差距，那么浏览器可能受 GPU 限制。
Chrome 工程师 Nat Duca 在这篇文章中提供了更多信息：
GPU 有界性通常来自两件事：
- 拥有 -webkit-filter，保留元素的 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）在这段代码中表现不佳。同样，灰色区域表示渲染线程正忙于处理未检测的代码，因此很难判断发生了什么。
于 2013-11-27T14:47:23.620 回答
0
我建议您使用http://pagespeed.googlelabs.com
它基本上会向您显示页面加载时发生的事情的完整详细信息，以便您知道在哪里工作......（我也认为在某些情况下可能会错过某些信息）
此外，您应该对页面进行内存分析，以查看某些对象需要多长时间才能加载到内存中。
于 2012-07-24T22:49:16.687 回答