在chrome devtools时间轴中进行长帧调试

Question

我无法在chrome devtools中调试我的javascript性能。我正在做一些沉重的动画，我在时间轴上遇到了一些我不理解的东西（在运行一些动画时）。

我用红色圆圈标记了点击事件。带有绿色“动画”的蓝色方块是动画（令人惊讶的是）。红场是我遇到问题的地方。

需要300-400毫秒，并在动画结束后发生。调用堆栈几乎是空的，我不是devtools专家。是否有明显的事情发生，我看不到？

另外，如果我等待一段时间，动画会更顺畅，那些红色的长帧也会消失。

在项目中，我使用Backbone，下划线，jQuery和TweenMax进行动画制作。

Answer 1

从时间轴面板的外观来看，我猜你正在使用旧版Chrome。请更新到v57。在以前的版本中存在一个错误，其中动画之间的预期延迟标记为红色（长帧）。请参阅this report。

Chrome 52：

Chrome 57：