DOM Terms To Know
If you’re working with CSS or JavaScript there are some terms that are important to know. With either you’re going to be affecting the DOM (Document Object Model) which is an API to a webpage, allowing users of that API to read and manipulate the page’s content, structure, and styles. The DOM is represented by a node tree with a parent stem and several branches which are nested elements.
Layout is the process where the browser figures out the size and location for all elements on the page. Layout is normally scoped to the entire document.
A reflow is the name of the web browser process for recalculating the layout of the page. It recompute the dimensions and position of the element and triggers reflows on the elements children, ancestors, and elements that appear after it in the DOM. Some examples of what cause a reflow is changing the width, height, font-family, font-size.
A paint is the process to fill pixels for every visual part of an element which includes color, border, outline, visibility, background.
A repaint occurs when changes are made to an elements skin that changes it visibly, but does not affect its layout.
Composite is the step where the browser needs to draw layers in the correct order. Since elements can overlap each other, this step is important to make sure elements appear in the order intended.
