Saturday, May 16, 2015

Browser Reflow and Repaint

Once all elements are downloaded, a browser will create a DOM tree and a rendering tree.  The rendering tree is based on the DOM tree structure.  Some DOM elemenet may not have a corresponding rednering tree nodes but those that have equivalence will have one or more nodes in the rendering tree.

When the DOM changes that affected the display geometry of element, some branches of the rendering tree will be invalidated.  A reflow will be done to rebuild that part of the rendering tree.  A repaint will then be followed to correct the display to match the changes.

Reflow happens in situation such as visible elements are added, position change, size change, content changes (e.g. text changes and window resizing etc.)

No comments: