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

Posted 2023-03-07

【中文标题】使用“Frames”进行 Web 检查器分析：当时间线中没有任何内容时查找性能问题的原因

【英文标题】：Web inspector profiling with "Frames": finding the cause of performance problems when nothing appears in the timeline

【发布时间】：2012-07-10 12:29:51

【问题描述】：

我刚刚观看了 Google I/O 会议 Jank Busters: Building Performant Web Apps，演讲者解释了如何在 Chrome 网络检查器时间轴中使用新的“框架”视图。

这是我在正在开发的页面上滚动时得到的示例记录：

如您所见，某些帧存在巨大延迟，但时间线中没有任何明显的原因（黄色的“Timer Fired”事件之间有很大的间隔）。如何解决性能问题以持续提高帧速率？

【问题讨论】：

那是什么版本的 Chrome？我有 20.0.1132.57，但在“时间轴”选项卡下看不到帧部分。

现在我在 22 岁（开发频道）。不知道是不是 21 岁。

【参考方案1】：

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

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

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

【讨论】：

我已经使用了一些 Page Speed - 在我看来，Chrome 已经慢慢地将所有 Page Speed 功能直接集成到 Web Inspector 中。该扩展很有用，但我认为它不能提供对这种特殊情况的更多洞察。

Page Speed 很棒，但它更侧重于快速加载页面，而上面显示的时间线与页面运行期间发生的操作有关，可能是为了响应用户事件或动画计时器.

【参考方案2】：

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

这是来自 Chrome 开发工具 Timeline 面板的 Frames 视图的特别令人担忧的快照。

根据documentation：

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

条形底部的极小黄色和绿色区域表明事件处理、绘制和合成都运行得非常快——快到低于表示 30fps 阈值的水平线，并且可能比 60fps 更快大部分时间的阈值（线未显示。）

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

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

每个灰色区域显示渲染器线程被占用的时间段。如果您看到许多间隙，则浏览器可能受 GPU 限制。

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

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

拥有-webkit-filter，保留元素的3D属性。那些在 gpu 上吃东西的人就像......嗯，饿了。 大层太多。

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

经验法则：大多数计算机都设计为可以触摸主屏幕上的每个像素大约 4 次。举一个非常简单的例子，一台使用了 2 年的 MacBook Air 是为其 LCD 尺寸配置的。当您插入具有多个层的 30" 显示器时，它开始受 GPU 限制。

为什么这很重要？ [Handwaving,] 当我们绘制屏幕时，一个图层触摸一个像素一次。如果图层是窗口的大小，例如你有一个 width=100% height=100% div 和 -webkit-transform: translateZ(0)，然后你触摸屏幕的每个像素一次。因此，计算图层的面积，如果超过显示器面积的 4 倍，您可能无法进入太空[因为您受 GPU 限制]。

对 gpu 有界性的一个很好的测试是在每个维度上将窗口大小缩小 1/2。如果事情继续缓慢，那么其他事情正在发生......如果事情变得更快，你可能会碰到 GPU。

就我而言（如最上面的图片所示），我仍在尝试找出导致灰色条的原因。代码没有改变，性能曾经很棒。由于某种原因，可能是较新的 Chrome 版本（今天我运行的是 31.0.1650.57 m）在这段代码中表现不佳。同样，灰色区域表示渲染线程正忙于处理未检测的代码，因此很难判断发生了什么。

【讨论】：

在新的 ChromeDev 工具 Timeline UI（没有 Frames 视图）中，这种现象会是什么样子？会不会导致requestAnimationFrame being consistently called right before the end of the frame？我开始认为我也受 GPU 限制，但我在不同的机器/操作系统上看到了这种行为。