解释 Chrome 开发工具中的丢帧

Question

我正在寻找有关如何解释 Chrome 开发工具显示丢帧的信息。官方文档似乎没有涵盖这一点或关于请求动画帧的 Udacity 课程。

我有一个 webGL 项目（使用 Three.js），当我制作动画时，我在 chrome 开发工具中看到以下内容 - 我正在使用 requestAnimationFrame。

需要明确的是，我不是在问如何修复我的代码，或者我的代码有什么问题。我请求帮助理解这告诉我什么，代码无关紧要。

如果有人可以建议...

1. 从上面的屏幕截图中，您可以看到花费了 15.7 毫秒，但警告有丢帧。如果我点击任务，似乎需要 12 毫秒，那么额外的 3.7 毫秒从何而来？既然我的功能都包含在“任务”部分中，我怎样才能找到呢？

2. 在ref 15.7ms之前看到的绿色1.0ms是一帧吗？ - 这是否意味着我正在触发 requestAnimationFrame 但什么也不做？由于开发工具中没有显示任何内容，我如何找出正在触发它的内容？

编辑。这是我能得到的一个更极端的例子，你可以看到它是同样的事情，我的任务实际上花了 9 毫秒，但它说帧是 82 毫秒！

Answer 1

我不是 Google 的，更不是 DevTools 的专家，只是在 Chrome DevTools 里读了几行代码就路过了。

丢帧的原因有多种，您可以查看FrameDropReason。

但是要了解丢帧的原因是什么，除了阅读分析 JSON 之外，我没有找到更好的方法，您可能会发现如下内容：

{"args":{"data":{"compositeFailed":8192,"unsupportedProperties":["background-color"]}},"cat":"blink.animations,devtools.timeline,benchmark,rail","id2":{"local":"0x3b08a0fb80"},"name":"Animation","ph":"n","pid":23024,"scope":"blink.animations,devtools.timeline,benchmark,rail","tid":259,"ts":71014192568},

基本上是说由于不支持的 CSS 问题，合成器丢弃了帧。有关合成器失败原因的更多详细信息此处。

研究一下这个问题也很好，它跟踪了

Dropped Frame

的添加。

再次强调，我并不完全确定，只是提供一些提示供您研究。

Answer 2

这只是我个人的解读。

掉帧

即使使用非常简单的动画，也可能会发生“丢帧”，但与我在上面的评论中所写的相反，它并不对应于屏幕上实际渲染的帧。

如果您创建一个非常简单的 Web 动画（如

opacity: [0, 1]

），通过 CSS 或 JS 创建，并通过 Chrome v90 中的相应面板记录其性能，您应该看到 98% 的帧是绿色的，2% 是红色的（丢弃）帧）。请注意，绿色和红色帧可以持续更长的时间，有时甚至少于 16.67 毫秒。

另请注意，我相信 Chrome v89 中报告了更多此类动画的红框。

动画任务后的 3.7 毫秒

这一次似乎被图形处理单元用来使合成工作，如动画任务之后的（绿色，约 1 毫秒）GPU 任务所示。还剩下 2.7 毫秒，没有任何解释。

Chrome DevTools 似乎并不是 100% 可靠。这可能是 GPU 和 CPU 之间的延迟，或者丢失的信息。如果您录制一个简单的动画不到 6 秒，有时根本没有记录任何信息！但我相信衡量动画性能一直很困难，Chrome 正在努力在其最新版本中改进它。

动画前1毫秒

我认为这是浏览器在开始新的渲染周期之前运行强制任务所花费的时间。

总之，术语“帧”和“fps”（每秒帧数）的使用方式似乎相当难以理解。

Answer 3

我不是分析专家，但我发现

chrome://tracing

功能对于了解丢帧似乎与没有活动的 JS 任务相关时发生的情况很有用。

这是 Chrome 配置文件的屏幕截图： 请注意丢失的帧，它们似乎没有任何任务或任何活动导致它们

这是同一跟踪的屏幕截图（导出 json 并加载到跟踪工具中）：

这并不能准确回答您的问题，但是通过导出 json 并加载到跟踪工具中，您可以滚动查找在丢帧期间占用您大部分时间的内部渲染管道函数。

Chrome 跟踪：https://aras-p.info/blog/2017/01/23/Chrome-Tracing-as-Profiler-Frontend/ Chromium 框架生命周期：https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/life_of_a_frame.md