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

Regarding what you wrote about requestAnimationFrame:

Also, because raf is only attached at the window level, it is unable to be tied to specific dom nodes

You can (in theory) have the code running in an iframe, therefore the window object is the whole element, or a 1px iframe could be a point on your content.

I have got this working in Firefox by looking at mozPaintCount (as you said and as @alexK85 suggests in their answer) to see if there has been a repaint after CSS change (browser does not do repaint immediately after CSS change when iframe out of viewport). But, I have not yet been able to do a similar thing with requestAnimationFrame in other browsers to establish if there has been a repaint of the iframe immediately after CSS change.

Does anyone have any suggestions about how raf could be used to establish if the browser does a repaint?

Answer 2

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.