View Browser Repaints in Google Chrome and Mozilla Firefox
One goal of super-optimized websites is to prevent browser repaints due to changes in a block's style or content. There are numerous ways we intentionally (or unintentionally) trigger block repaints, but the browser does it so quickly we have trouble seeing when and where it happens. Recognizing the importance of allowing developers to micro-optimize their pages, the Chrome and Firefox teams have added features to their browsers to allow us to see those repaints. Here's how to do it!
Google Chrome & Canary
The repaint feature needs to be enabled at startup for Chrome and Canary with the
open ./Google\ Chrome\ Canary.app --args --show-paint-rects
Be sure to include
--args in your command or you'll run into problems opening the browser. Repaints will display on each site you visit.
Mozilla Firefox, Aurora, Nightly
To view repaints in Firefox and Aurora browsers, you need to enable an about:config option. The option name is
nglayout.debug.paint_flashing. Turn this option to true and you'll quickly see repaints as the happen!
At the time of publish, only nightly exposed this config feature.
I recommend you take a few moments to scope out the repaint frequency on your websites and see what you can do to improve performance!
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind,...
Chris Coyer's incredible CodePen is much more than your typical code'n'share site. CodePen features the end result more than the code, provides loads of collaboration tools, and seems to be pushing new features every week. But what...
I generally dislike ESPN because they're the McDonalds of sports news but they recently did a piece on Luis Suarez that was eye-catching. The content itself was great but their use of parallax and imagery was outstanding. They've employed this technique...
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted
The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images. CSS rounded corners thus save us time in creating images and requests to the server. Today, rounded corners with...
Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors.