Considering Browser Reflow

Back in February I attended the HTML5 Denver Users Group presentation – Making Your UI Scream (Not Your Users) by Wesley Hales. From the title of the presentation you can probably guess that his talk was about website performance. Most of what he had to say about performance, I’ve heard before, but one of the things that Wesley brought up was reflow. I’ve built plenty of websites and performance is always at the top of my list, but I never looked too much into reflow. This was my biggest takeaway from Wesley. Now that performance for mobile websites is a huge consideration, I’ve been interested in other micro-optimizations. Maybe another reason that I haven’t taken reflow into consideration before is because I follow one of Wesley’s rules: Don’t let micro-optimizations weigh you down. Finish the project first.

More On Reflow

Reflow is the process in which the browser calculates the positions and geometries of all the elements in the DOM tree for visual presentation. Reflow is a user-blocking browser operation that can effect the UX, and in this day-and-age of immediate gratification, performance is a very important UX consideration. One of the most powerful things about jQuery is it’s ability to easily manipulate the DOM with methods like .show(), .hide() and .attr(), but in order to minimize reflow you should avoid touching the DOM as much as possible.

Avoiding Reflow

Something to really be aware of when considering reflow is to remember that the deeper in the DOM hierarchy a javascript invoked manipulation is, the more time the browser will need to perform the reflow because it recalculates all the way back up to the parent element, any child elements and elements that come after the manipulated element in the DOM.

Another consideration to minimize reflow is to avoid complex CSS selector such as descendant selectors. A descendant selector will only select a selector that is a descendant of another specific selector. An example of descendant selectors might look like this:

ul li span a

Descendant selectors are very CPU intensive, so try to avoid them at all costs. I would recommend changing the class on the element that you need to style instead of using descendant selectors. On that note, avoid making CSS changes via the style attribute as this will cause reflow for each style change.

I’m no reflow guru, so I’m in no position to go into great depth on the subject, but Nicole Sullivan has an in-depth article called Reflows & Repaints: CSS Performance making your JavaScript slow? that I suggest reading if you want to further understand how to avoid reflows & repaints. I’m just happy to be learning something new!

Additional Resources:

• Effective Javascript
• Minimizing browser reflow
• Notes on HTML Reflow
• Reflows & Repaints: CSS Performance making your JavaScript slow?

How do you avoid reflow?