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.
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.
- Minimizing browser reflow
- Notes on HTML Reflow
How do you avoid reflow?