chrome devtools 时间线中的长帧调试
Long frame debugging in chrome devtools timeline
我在 chrome devtools 中调试我的 javascript 性能时遇到问题。我正在做一些繁重的动画，并且在我的时间轴中遇到了一些我不理解的东西（而 运行 一些动画）。
我用红圈标记了点击事件。上面写着绿色 'animation' 的蓝色方块是动画（真是个惊喜）。红色方块是我遇到的问题。
它需要 300-400 毫秒，并且发生在动画结束之后。调用堆栈几乎是空的，而且我不是 devtools 专家。是否有明显的事情发生，但我没有看到？
此外，如果我再等一会儿，动画就会运行得更流畅，那些红色的长框也不见了。
在项目中我使用Backbone、下划线、jQuery和TweenMax做动画。
从您的时间轴面板的外观来看，我猜您使用的是旧版本的 Chrome。请更新到 v57。以前的版本中存在一个错误，动画之间的预期延迟被标记为红色（长帧）。参见 this report。
Chrome 52:
Chrome 57:
我在 chrome devtools 中调试我的 javascript 性能时遇到问题。我正在做一些繁重的动画，并且在我的时间轴中遇到了一些我不理解的东西（而 运行 一些动画）。
我用红圈标记了点击事件。上面写着绿色 'animation' 的蓝色方块是动画（真是个惊喜）。红色方块是我遇到的问题。
它需要 300-400 毫秒，并且发生在动画结束之后。调用堆栈几乎是空的，而且我不是 devtools 专家。是否有明显的事情发生，但我没有看到？
此外，如果我再等一会儿，动画就会运行得更流畅，那些红色的长框也不见了。
在项目中我使用Backbone、下划线、jQuery和TweenMax做动画。
从您的时间轴面板的外观来看，我猜您使用的是旧版本的 Chrome。请更新到 v57。以前的版本中存在一个错误，动画之间的预期延迟被标记为红色（长帧）。参见 this report。