How is HTML DOM changed?

Repaint
When changing element styles which don’t affect the element’s position on a page (such as background-color, border-color, visibility), the browser just repaints the element again with the new styles applied (that means a “repaint” or “restyle” is happening).

Reflow
When the changes affect document contents or structure, or element position, a reflow (or relayout) happens. These changes are usually triggered by:

DOM manipulation (element addition, deletion, altering, or changing element order);
Contents changes, including text changes in form fields;

Let’s see a few examples:

var bstyle = document.body.style; // cache

bstyle.padding = “20px”; // reflow, repaint
bstyle.border = “10px solid red”; // another reflow and a repaint

bstyle.color = “blue”; // repaint only, no dimensions changed
bstyle.backgroundColor = “#fad”; // repaint

bstyle.fontSize = “2em”; // reflow, repaint

// new DOM element – reflow, repaint
document.body.appendChild(document.createTextNode(‘dude!’));

Uday Ogra

Connect with me at http://facebook.com/tendulkarogra and lets have some healthy discussion :)

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *