javascript - Interpreting Dropped Frame In Chrome Dev Tools - Stack Overflow

admin管理员组

文章数量:1178539

I am looking for information on how to interpret the Chrome Dev Tools when it shows a dropped frame. The official docs don't seem to cover this or the Udacity course about request animation frames.

I have a webGL project (using Three.js) and I see the following in chrome dev tools when I'm animating - I am using requestAnimationFrame.

To be clear, I AM NOT asking how to fix my code, or what is wrong with my code. I am asking for help understanding what this is telling me, the code is irrelevant.

If anyone could suggest...

1. From the above screenshot you can see that it's taking 15.7ms but warning there's a dropped frame. If I click on the task it seems to take 12ms, so wheres the additional 3.7 ms coming from? How can I find out, since my functions are all covered in the "task" portion?

2. Is the green 1.0ms that is seen before the ref 15.7ms a frame? - Does that mean I'm firing a requestAnimationFrame but doing nothing? Since nothing is shown in the dev tools, how can I find out what is firing it?

EDIT. Here's a more extreme example I can get, as you can see its the same sort of thing though, my task actually took 9ms, but it says the frame was 82ms!

I am looking for information on how to interpret the Chrome Dev Tools when it shows a dropped frame. The official docs don't seem to cover this or the Udacity course about request animation frames.

I have a webGL project (using Three.js) and I see the following in chrome dev tools when I'm animating - I am using requestAnimationFrame.

To be clear, I AM NOT asking how to fix my code, or what is wrong with my code. I am asking for help understanding what this is telling me, the code is irrelevant.

If anyone could suggest...

1. From the above screenshot you can see that it's taking 15.7ms but warning there's a dropped frame. If I click on the task it seems to take 12ms, so wheres the additional 3.7 ms coming from? How can I find out, since my functions are all covered in the "task" portion?

2. Is the green 1.0ms that is seen before the ref 15.7ms a frame? - Does that mean I'm firing a requestAnimationFrame but doing nothing? Since nothing is shown in the dev tools, how can I find out what is firing it?

EDIT. Here's a more extreme example I can get, as you can see its the same sort of thing though, my task actually took 9ms, but it says the frame was 82ms!

• javascript
• google-chrome-devtools

Share Improve this question Follow edited Mar 31, 2021 at 10:10 user2445278 asked Mar 31, 2021 at 9:48 user2445278user2445278 92811 gold badge88 silver badges2121 bronze badges 4

• 3 I remember googling it a few weeks ago and stumbling upon video related results. This "dropped frame" thing tripped me up again today so I'm glad you ask this on SO and hope someone from the Google team will read/answer it or that a proper documentation will be written. But I believe that a "dropped frame" is not a "bad" thing. It exists even for the simplest and most performant animation. It's like a drop of paint that has fallen on the screen. I also believe that the 3.7 ms is the time during which the GPU and the compositor are producing the result on the screen. No idea about 2. – cdoublev Commented Apr 7, 2021 at 12:49
• thanks for the comment, i cant find any decent information about this, so if any of the videos had anything remotely useful it would be great if you could link to them. – user2445278 Commented Apr 12, 2021 at 18:54
• I'm having similar issues, where renders dependent on scroll events, while scrolling on a mac trackpad, can delay the next frame indefinitely (until the scroll stops). For me, the frame times are identical (~16ms), but I get a long string of dropped frames during the scroll. No javascript runs during these dropped frames. It seems to be related to render load. Also, If I disable "threaded scrolling" in chrome, the situation improves considerably. – aaaidan Commented Mar 31, 2022 at 4:54
• I wish there were better docs about this sort of Chrome perf tools arcana! Unfortunately I suspect we're doomed to a life of guessing and "original research"

  本文标签： javascriptInterpreting Dropped Frame In Chrome Dev ToolsStack Overflow

  版权声明：本文标题：javascript - Interpreting Dropped Frame In Chrome Dev Tools - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738106985a2064397.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。