CODEWITHSUNDEEP
cssperformancescrollgoogle-chrome-devtoolsframe-rate
Yaniv Efraim
Yaniv Efraim

Reputation: 6713

Scrolling performance monitoring with Chrome Devtools - transparent bars

I am trying to debug my scrolling performance, using Chrome Devtools.

I have a list of elements, something like:

<ul>
   <li></li>
   ...
</ul>

I recorded scrolling the page and got the following: enter image description here

The confusing part here is that I cannot find the reason for the delays. As I see it, there are "transparent" bars and a "gap" between events / Composite Layers, but I cannot point at some long operation which causes the bad frame rate.

Am I reading it wrong?

Upvotes: 2

Views: 1487

Answers (2)

Paul Lewis
Paul Lewis

Reputation: 626

You're basically doing great here. We time updates to the screen in Blink to map to 60Hz in most cases, so if you see a transparent bar it's Blink essentially idling along waiting for the end of the 16ms frame.

You can also see a small amount of green and yellow at the bottom of the bar, which is the amount of work you're actually doing (which is tiny). So you may have -- say -- 1 or 2ms work there, leaving 14ms to fill out, which we show as transparent bars.

Sometimes you see those spikes where the bars shoot past the 60fps line. That's because of scheduling. Sometimes Chrome has to wait for CPU or GPU time and that can mean that frames run longer than anticipated. Often these are very minor and won't affect the user experience much (or at all), so I'd say it's worth focussing on whether you have room to spare in the bars, which you do. FWIW making sure Chrome is the only app running and testing in an incognito window is the "purest" way to test fps. Other apps running can skew your results on the basis that they too need the CPU and GPU.

In your case, though, you're nowhere near to pushing Chrome past its limits (since there's a ton of time to spare in each frame), so any long-running frames would, I suspect, be issues either with the scheduler or OS needing to prioritize something else.

Upvotes: 1

Jesse
Jesse

Reputation: 386

If you look at the framerate indicators on the right, you'll see you have few frames that surge under 30fps, so you're doing quite well. Those events might be indicative of your scrolling itself. Do you have a public url we could look at?

Also, if you have a complex background to your page (ie some texture), it will impose a heavy footprint on your scrolling performance as it requires larger areas of your page to be repainted simply on scroll.

Upvotes: 1

Related Questions