Page rendering: reflow/repaint
Reflow (relayot/relayouting) - process when parts or the whole DOM-tree need to be recalculating
Repaint (restyle) - process of changing of element's styles not connecting with it's size and position on the page
var body = document.body.style;
body.margin = "15px"; // reflow, repaint
body.color = "yellow"; // repaint - no dimensions changes
body.fontSize = "12px"; // reflow, repaint
Render tree changes are expensive. But browsers are quite smart - they will create a queue of the changes and only then will perform it in groups. Thus several reflows become one reflow. It sounds good, right? :)
Requesting style information, such as:
- offsetTop/Left/Width/Height
- scrollTop/Left/Width/Height
- clientTop/Left/Width/Height
- getComputedStyle() or currentStyle (IE)
