Rendering: repaint, reflow/relayout, restyle - www.phpied.com - 2009
Parts of the render tree (or the whole tree) will need to be revalidated and the node dimensions recalculated.
Reflow is also named layout, relayout, or layouting.
Parts of the screen will need to be updated, either because of changes in geometric properties of a node or because of stylistic change, such as changing the background color.
Repaint is also named repaint.
display: none
(reflow and repaint) or visibility: hidden
(repaint only, because no geometry changes)They batch the changes has much as they can.
But sometimes the script may prevent the browser from optimizing the reflows, and cause it to flush the queue and perform all batched changes. This happens when you request style information, such as
offsetTop
, offsetLeft
, offsetWidth
, offsetHeight
scrollTop
/Left/Width/HeightclientTop
/Left/Width/HeightgetComputedStyle()
, or currentStyle
in IEBecause the browser has to give you the most up-to-date value.
documentFragment
)display: none
before making the changes then restore the displayPreventing 'layout thrashing' - wilsonpage.co.uk - 20130919
Explain how to optimize repaints / reflows.
Introduce fastdom lib to industrialize optimizations.