DOM Terms To Know
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.