[英]Long frame debugging in chrome devtools timeline
I am having trouble debugging my javascript performance in chrome devtools.我在 chrome devtools 中调试我的 javascript 性能时遇到问题。 I am doing some heavy animations, and I encountered something I don't understand in my timeline (while running some animations).我正在做一些繁重的动画,并且在我的时间轴中遇到了一些我不理解的东西(在运行一些动画时)。
I marked click events with red circles.我用红色圆圈标记了点击事件。 The blue squares with green 'animation' written on them are animations (what a surprise).上面写着绿色“动画”的蓝色方块是动画(多么令人惊讶)。 And the red square is where I have my problem.红色方块是我遇到问题的地方。
It takes between 300-400 ms, and happens after the animation ends.它需要 300-400 毫秒,并且在动画结束后发生。 The call stack is nearly empty, and I am no devtools expert.调用堆栈几乎是空的,我不是开发工具专家。 Is there something obvious going on, that I don't see?有什么明显的事情发生,我没有看到?
Also, if I wait a little longer the animations runs smoother, and those red long frames are gone.此外,如果我再等一会儿,动画就会运行得更流畅,那些红色的长帧就会消失。
In the project I use Backbone, underscore, jQuery and TweenMax for animations.在项目中,我使用 Backbone、下划线、jQuery 和 TweenMax 制作动画。
Judging from how your Timeline panel looks I'm guessing you are using older version of Chrome.从您的时间轴面板的外观来看,我猜您使用的是旧版 Chrome。 Please update to v57.请更新到 v57。 There was a bug in previous versions where expected delay between animations was marked red (long frame).在以前的版本中存在一个错误,动画之间的预期延迟被标记为红色(长帧)。 See this report .请参阅此报告。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.