Rendering: repaint, reflow/relayout, restyle

Different browsers work differently, but the following diagram gives a general idea of what happens, more or less consistently across browsers, once they’ve downloaded the code for your page. The best code practice will definitely help a lot in performance.

I have created a simple JS snippet to demostrate the good practice at JS Bin

source via: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/