Redraw:
When some elements in the render tree need to update attributes, and these attributes only affect the appearance and style of the element, but do not affect layout operations, such as background-color, we call such operations redraw.
Rearrangement (reflux):
When a part (or all) of the render tree needs to be reconstructed due to changes in the size, layout, and hiding of elements, it will affect the layout operation. Such operations are called rearrangement.
Common attributes and methods that cause rearrangement:
Any operation that changes the geometric information of the element (the position and size of the element) will trigger the rearrangement.
(1) Add or delete visible DOM elements;
(2) Element size changes-margins, padding, border, width and height
(3) Content changes, such as user input text in the input box
(4) Browser window size Change-when the resize event occurs
(5) calculate the offsetWidth and offsetHeight properties
(6) set the value of the style property
(7) when you modify the default font of the web page.
Rearrangement must be redrawn, and redrawing does not necessarily cause rearrangement. The cost of rearrangement is much higher than that of redrawing. Changing the child nodes in the parent node is likely to cause a series of rearrangements of the parent node.
Common attributes and methods that cause redrawing:
Common attributes and methods that cause rearrangement:
