Javascript chrome开发工具中的长帧调试

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

我用红色圆圈标记单击事件。上面写着绿色“动画”的蓝色方块是动画（真令人惊讶）。红场就是我的问题所在

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

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

---

在这个项目中，我使用主干线、下划线、jQuery和TweenMax来制作动画。

从时间轴面板的外观判断，我猜您使用的是较旧版本的Chrome。请更新到v57。在以前的版本中，动画之间的预期延迟被标记为红色（长帧），存在一个bug。看

铬52：

铬57：

---

你的意思是红圈而不是绿圈？在这段时间里你有没有看到任何jank？换句话说，用户体验在这些时期会恶化吗？或者你只是不明白为什么FPS会下降？因为在问题期间，我没有看到太多的CPU活动。事实上，你不会一直看到红色的长帧（“如果我再等一会儿……那些红色的长帧就不见了”）可能只是意味着这是DevTools UI.P.s中的一个怪癖。根据内存图表，您的动画可能有漏洞。你可能想留意一下。另一个可以用来检查FPS的工具是FPS表。打开，键入

渲染

要打开渲染设置抽屉，请启用FPS米。如果FPS表显示您的FPS在“问题期间”正常，那么这只是时间线中的一个怪癖。谢谢！我想这就是问题所在。现在它显示正确，没有长帧。