javascript - chrome devtools 时间线中的长帧调试

Question

我在 chrome devtools 中调试 javascript 性能时遇到问题。我正在做一些繁重的动画，并且在时间轴中遇到了一些我不理解的东西(在运行一些动画时)。

我用红色圆圈标记了点击事件。上面写着绿色“动画”的蓝色方 block 是动画(真是令人惊讶)。红色方 block 是我遇到问题的地方。

它需要 300-400 毫秒，并在动画结束后发生。调用堆栈几乎是空的，而且我不是开发工具专家。有什么我看不到的明显的事情发生吗？

另外，如果我再等一会儿，动画就会运行得更流畅，那些红色的长帧就会消失。

在项目中我使用 Backbone、underscore、jQuery 和 TweenMax 来实现动画。

Answer 1

从您的时间轴面板的外观来看，我猜测您使用的是旧版本的 Chrome。请更新至 v57。以前的版本中存在一个错误，动画之间的预期延迟被标记为红色(长帧)。请参阅this report .

Chrome 52:

Chrome 57: