javascript - Chrome 开发工具中的长帧

Question

不确定如何在 Chrome 开发工具(性能选项卡)中解释这些长帧。这是 React 中动画的配置文件。我正在使用 d3-timer 来运行使用 requestAnimationFrame 的动画。这些零星的长帧(在 ~50 到 ~70 毫秒之间)在动画中有明显的卡顿。但是我没有看到像您通常在丢帧时看到的任何红色。这是屏幕截图...

问题:什么会导致这样的随机长帧？在此示例中，RAF 似乎在该帧期间运行了多次，并且没有显示导致帧延迟的任何其他事件。那么您将如何诊断问题呢？任何帮助将不胜感激。如果有帮助，我很乐意提供更多屏幕截图或信息。

注意:我没有发布代码，因为它与代码无关。我在问任何代码怎么会像这样结束。在 Chrome 开发人员工具中，帧速率下降并且多个 RAF 帧最终出现在单个“帧”中。想知道是否有人以前见过这个并且可能能够阐明一些问题？

Answer 1

据我所知，这是 Chrome 性能工具中的一个错误。

我和你有同样的问题，但更明显的不是我的应用程序的问题:

在我的例子中，这是一个带有简单着色器的 WebGL2 页面，除了调用 requestAnimationFrame 之外基本上没有发生任何事情。如您所见，几乎没有负载，但仍然存在令人费解的缺口，其中似乎掉帧了。

我说“似乎是”是因为您可以看到 GPU 和合成器仍然处于事件状态，就好像它们在正常时间渲染帧一样 - 开发工具中没有标记表明帧发生了。

所以我下载了配置文件，它只是一个 JSON 文件，并进一步深入研究。配置文件中表示帧开始的行如下:

{"args":{"frameSeqId":94370284,"layerTreeId":1},"cat":"disabled-by-default-devtools.timeline.frame","name":"BeginFrame","ph":"I","pid":5640,"s":"t","tid":6908,"ts":1839098089419},

关键部分是"name":"BeginFrame"。我不确定时间戳 (ts) 值是基于什么，但它们以微秒为单位，当日志正确对齐时，这些绝对是帧起始行的事件.它们存在于我的跟踪中所谓的“丢弃”帧!无论是什么原因导致探查器不显示它们，都是由于其他一些数据造成的。

我会尝试将其报告为错误，并查看它的去向。编辑:https://bugs.chromium.org/p/chromium/issues/detail?id=1339567