What all the browser needs to calculate? What phases of the rendering process like Render Tree -> Layout -> Paint etc.
Are triggered.
Further are they localised or affect the entire document.
Repaint and Reflow (Layout) Changing the DOM one or both of these:
Reflow - Layout (Heavy) This occurs when we generally change the widht, height etc of element. Parts of the render tree (or the whole tree) will need to be revalidated and the node dimensions recalculated. This is called a reflow, or layout, or layouting.
Repaint When change properties like border, backgroud color. 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. This screen update is called a repaint, or a redraw.
This will link gives a detailed list of triggers: https://gist.github.com/paulirish/5d52fb081b3570c81e3a