不确定如何在Chrome开发工具中解释这些长帧（性能选项卡）。这是一个动画在React的配置文件。我正在使用d3-timer运行动画，这是使用requestAnimationFrame。有明显的jank在动画从这些零星的长帧（在~50和~ 70 ms之间）。但是我没有看到任何红色，就像你通常看到的那样，当你丢帧。这里是一个截图...
**问题：**是什么原因导致这样的随机长帧？在这个例子中，看起来RAF在一帧中运行了多次，并且没有显示任何其他活动导致帧延迟。那么你如何诊断这个问题？任何帮助都将非常感谢。如果有帮助的话，我很高兴提供更多的屏幕截图或信息。
**注：**我不是在发布代码，因为这与代码本身无关。我想问的是，为什么任何代码都可能出现这样的情况。在Chrome开发者工具中，帧速率下降，多个RAF帧最终出现在一个“帧”中。想知道是否有人见过这种情况，也许可以提供一些帮助？
1条答案
按热度按时间vc9ivgsu1#
据我所知，这是Chrome性能工具中的一个bug。
我遇到了和你一样的问题，但更明显的是我的应用程序没有问题：
在我的例子中，这是一个WebGL 2页面，带有一个简单的着色器，除了调用
requestAnimationFrame之外，基本上什么都没有发生。正如您所看到的，实际上没有负载，但是仍然有一些令人费解的缺口，似乎是帧被丢弃了。我说“看起来是”是因为你可以看到GPU和合成器仍然处于活动状态，就像它们在正常时间渲染一帧一样--开发工具中没有标记表明发生了一帧。
所以我下载了这个概要文件，它只是一个JSON文件，并进一步研究它。概要文件中表示帧开始的行是：
关键部分是
"name":"BeginFrame"。我不确定时间戳（ts）值基于什么，但它们是以微秒为单位的，当日志正确对齐时，这些肯定是帧开始行的事件。它们存在于我的跟踪中所谓的“丢弃”帧中！无论是什么原因导致分析器没有显示它们，这是由于其他一些数据。我会尝试将其报告为一个bug，看看它会发展到什么程度。https://bugs.chromium.org/p/chromium/issues/detail?id=1339567