How can I tell when the browser stops repainting DOM layers/nodes because they are obscured?

Question

Identification: I\'m looking at all possible solutions for detecting when the FPS drop or the repaints/reflows stop happening in a browser due to the browser op

Answer 1

I used the Mozilla mozPaintCount in the following code, but I am not get the FPS value that I would expect.

Part 1: run this code once to populate the variables.

var currentFrames = window.mozPaintCount, currentTime = new Date();

Part 2: run this code anytime after Part 1.

(window.mozPaintCount - currentFrames)/((new Date() - currentTime)/1000)

The result shows FPS, for my site, I'm getting 9FPS. Chrome FPS counter shows me 60FPS.

Overall, browser's Page Rendering Performance is a relatively new topic of interest in the Web Dev World. Besides Chrome DevTools, every other major vendor does not seems to have a large interest in exposing tools for performance. Since the interest in Web Page Rendering performance is limited, so is a lot of data.

The big performance ideas that a developers are focusing are. Scroll Performance, CSS effect on Paint Time, Animated Gifs as you mentioned, and of course requestAnimationFrame. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

Really,before jumping into this field head first I recommend that you spend a little time actually understanding what is it that a browser does to render your page and updates to that page. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

I would add more links for you, but my SO rep is too low.