Yo! Check My Reflow
I remember when I first started getting into website performance optimization, the more I dug into it, the less I seemed to know. I remember hearing of browser repaint and not knowing what reflow is, and not realizing how important either of them really are in performance optimization. I definitely didn’t have many strategies in my toolbox to address issues with reflow. So, after reading a quick overview of reflow on Google Code, I decided to get up to speed on the subject.
I’m not going to go into a deep explanation, because the links below provide more than enough info to get you well versed on reflow. Basically, reflow is how a browser calculates the positioning or layout of elements. This may not be the best definition. So here is video of the process for those of you who are more visual.
As you can see there is a lot going on to get your elements positioned on the page. Minimizing reflow is very important in improving the performance of your web page.
Here are some common rules you can follow to reduce the effects of reflow. I found that these rules were common across a few of the resources I checked on reflow.
- Minimize the depth of your DOM tree.
- Minimize CSS rules, remove unused CSS rules, just allow rules to cascade (don’t repeat font-size: 1em if this is already defined in a parent selector).
- Animate elements in a fixed or absolute position. (recalculating the position of an animation is bad)
- Simplify CSS selectors as much as possible and reduce use of descendant selectors.
- Avoid or minimize inline styles and define as much as possible in external CSS.
- Avoid tables for layout and if you have to use them use fixed width.
Now I need to go start testing the effectiveness of some of these optimizations on sites I manage. I hope it helps you speed things up.
Resources:
- http://www.mozilla.org/newlayout/doc/reflow.html
- http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow
- http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
- http://code.google.com/speed/articles/reflow.html
- http://redivide.com/blog/gecko-reflow-awesome-visualization-of-web-page-layout/
- https://wiki.mozilla.org/Gecko:Table_reflow_optimization
- https://wiki.mozilla.org/Gecko:Reflow_Refactoring
View more posts in:
Performance Optimization
UI
Indeed browser reflow gives you important hints on how the page comes to be.
A fun fact, if you are cursed for even a short period to use dial-up, and with the proper dial-up optimization, reflow can be watched live, as it happens, albeit in slow motion.
Chris, That is a fun fact. I haven’t had dial up since AOL was the dominant player on the internet. It would be fun to watch reflow live and may even have serious use in optimizing sites if it can be made to work reliably. I wonder if throttling back my internet connection would can have the same effect. Thanks for the tip. Does anyone have an old modem laying around?