简体   繁体   English

chrome devtools时间线中的长帧调试

[英]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 .请参阅此报告

Chrome 52:铬 52:

在此处输入图片说明

Chrome 57:铬 57:

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Chrome DevTools时间轴:框架视图显示与“记录”图表不一致 - Chrome DevTools Timeline: Frame View appears inconsistent with Records chart Chrome DevTools框架事件计时 - Chrome DevTools frame event timing 流氓sourceMap以防止Chrome DevTools调试 - Rogue sourceMap to prevent Chrome DevTools debugging Chrome - devtools时间线中的事件时间与性能计时API之间的差异 - Chrome - Difference between event time in devtools timeline and performance timing API colors 的不同色调对 Chrome Devtools 时间轴中的资产意味着什么? - What do the different shades of colors mean on an asset in the Chrome Devtools Timeline? 在DevTools中读取Chrome帧速率结果 - Reading Chrome Frame Rate results in DevTools Chrome Frame时间轴上的White Bar是什么意思? - What is the meaning of White Bar on Chrome Frame Timeline? 在 Node.js 中使用 Chrome Devtools 调试 Redux - Debugging Redux using Chrome Devtools in Node.js chrome devtools 在调试时不再显示内联变量 - chrome devtools no longer displays variables inline while debugging 使用 Devtools 调试 Chrome 并查找分配给变量的特定单词 - Debugging Chrome using Devtools and look for a specific word being assign into a variable
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM