A cool new browser event just recently landed in the latest Firefox nightlies: an event announcing when the browser re-draws a portion of the page.
This particular event, called MozAfterPaint fires whenever something is drawn to the screen.
In a nutshell, boundingClientRect gives you a single rectangle encompassing the entire area in which a paint operation could’ve taken place whereas clientRects gives you a number of rectangles, each encompassing an individual area that was drawn.
To use the demo let the page load then move your mouse around (triggering new paint events). When you’re done simply click anywhere on the page to draw the overlay.
You can use the tracking script on any page, simply copy this bookmarklet to your toolbar in a Firefox 3.1 nightly: Track Paint. Then activate it on a page where you wish to track paint events. (Clicking anywhere on the page will show the results.)
For example I ran the bookmarklet on the jQuery.com homepage, moved my mouse over the navigation, hovered over the tooltips, and finally focused on the checkboxes before clicking – creating this complete visual effect:
The important part of the tracking code is as follows:
store.push( e.clientRects );
// To start logging…
window.addEventListener(“MozAfterPaint”, log, false);
// After logging is done…
window.removeEventListener(“MozAfterPaint”, log, false);[/js]
You have to be sure to do all of your logging in a separate part of the application (don’t do any rendering inside the MozAfterPaint event handler, otherwise you’ll cause some recursion to occur). Thus before you render the results the MozAfterPaint handler should be removed from the page.
It’s likely that the primary use of this event will be within extensions (such as Firebug) mostly due to the fact that the overhead incurred by initiating this event is so high.
Nonetheless I think this addition to the browser is absolutely fantastic. Developers have been craving more information about what’s going on underneath the hood and this is starting to provide exactly that.