Redrawing does not necessarily require rearrangement, rearrangement will inevitably lead to redrawing
1. Rearrangement: When we change the size and position of an element, we rearrange the styling, layout, drawing, and all the rest of the process. This behavior is called rearrangement.
1) Add and delete visible DOM
2) The position of the element changes
3) Element size changes (margin, inner margin, border thickness, width and height geometry attributes)
4) Page rendering initialization
5) Browser window size changes
2. Redraw: Changing the color properties of an element does not retrigger the layout, but it does trigger the calculation and drawing of the style. This is redraw.
Reduce rearrangement and redrawing
Instead of changing the STYLE of the DOM one by one, define the CSS class first and then change the DOM className.
2. Do not place DOM node attributes in a loop as variables in the loop.
3. If fixed or absolute positions are applied to animated HTML elements, modifying their CSS will not reflow
Third, we can see that redrawing and rearranging occupy the main process, and js will also run on the main thread, so there will be a preemptive execution time problem. If you write an animation that constantly causes rearranging and redrawing, the browser will need to run the layout calculation and drawing operation on every frame.