Do you understand redrawing and reflow? What will happen respectively?

Reference: Do you really understand reflow and redraw

JavaScript-browser redraw and reflow.
What is reflow, what is redraw, and what is the difference?

1. The browser rendering process

1. The browser parses the obtained html code into a Dom tree. The DOM tree contains all HTML tags, including display:none hidden, and elements dynamically added with JS, etc.
2. The browser parses all styles (mainly including css and browser style settings) into a style structure
3. The dom tree and the style structure (cssom) are combined to construct a render tree. The render tree can recognize the style, and the render tree does not contain hidden nodes, such as display: none nodes, and head nodes; visibility: hidden The elements of will still be included in the render tree, because visibility: hidden will affect the layout (layout), will occupy space
4. Layout (reflow): Reflow according to the generated rendering tree to obtain the geometric information (position, size) of the node
5. Painting: Obtain the absolute pixels of the node according to the geometric information obtained from the rendering tree and reflow
6. Display: Send the pixels to the GPU and display them on the page

2. How to generate a render tree

1. Start traversing each visible node from the root node of the DOM tree
2. For each visible node, find the corresponding rules in the CSSOM tree and apply them
3. According to each visible node and its corresponding style, combined into a rendering tree

What are the invisible nodes?

• Some nodes that will not render output: script\meta\link, etc.
• Some nodes that are hidden through css, such as display: none

3. Reflow

Definition : When a part (or all) of the render tree needs to be rebuilt due to changes in the size, layout, and hiding of elements. This is called reflow. Each page needs to be reflowed at least once, when the page is first loaded.
**By constructing the rendering tree, we combine the visible DOM nodes with their corresponding styles, but we also need to calculate their exact positions and sizes in the device viewport. This stage of calculation is reflow. **In the reflow stage, the position and geometric information of the nodes are mainly calculated. When the page layout and geometric information change, reflow is required

4. Redraw

**Definition:** When some elements in the render tree need to update attributes, and these attributes only affect the appearance and style of the element, but not the layout.
Through the construction of the rendering tree and the reflow stage, we know the style and specifics of the visible nodes For information such as position and size, then we can convert each node of the render tree into an actual pixel on the screen. This stage is called a redraw node.

5. Reflow scenario

• Add or remove visible DOM elements
• The position of the element changes
• The size of the element changes (margin, padding, border, height, width)
• The content has changed, such as a text change or a picture being replaced by another picture of a different size
• When the page is first rendered
• If the size of the browser’s window changes,
  reflow will definitely cause redrawing, and redrawing will not necessarily reflow

6. The optimization mechanism of the browser

Most browsers optimize the reordering process through queued modification and batch execution . The browser puts the modification operation in the queue until a period of time has passed or the operation reaches a threshold before clearing the queue.
However, when obtaining layout information, the queue will be forced to refresh!

• offsetTop offsetLeft offsetWidth offsetHeight
• scrollTop scrollLeft scrollWidth scrollHeight
• clientTop clientLeft clientWidth clientHeight
• getComputedStyle()
• getBoundingClientRect

The above properties and methods need to return the latest layout information, so the browser has to empty the queue and trigger a reflow redraw to return the correct value. So when we need to use the above attributes, we can use a local variable to cache these values

7. How to reduce reflow and redraw

(1) Combine multiple modifications to the DOM and styles, process them in sequence, and use

• cssText : el.style.cssText += '...'
• Modify the CSS class: el.className += 'active'

(2) Batch modify DOM

How to reduce the number of reflow redraws when a series of modifications to the DOM are required:

1. Take the element out of the document flow
2. Make multiple changes to it
3. Bring elements back into the document

How to get DOM elements out of the document flow?

1. Hide elements, apply changes, and redisplay (it will cause two redraws when displaying and hiding nodes)
2. Use document fragments to build a subtree outside the current DOM, and copy it back to the document
3. Copy the original element to a node that is out of the document, after modifying the node, replace the original element

(3) Avoid triggering synchronous layout events

Use a variable to save the attribute value, for example:const width = box.offsetWidth

(4) For complex animation effects, use absolute positioning to get them out of the document flow

(5) CSS3 hardware acceleration (GPU acceleration)

Common css attributes that trigger hardware acceleration:

• transform
• opacity
• filters
• Will-change
  uses css3 hardware acceleration, so that the above animations will not cause reflow and redraw, but other attributes of the animation, such as background-color, will still cause reflow and redraw.

Defects :

1. If you use css3 hardware acceleration for too many elements, it will lead to a large memory footprint and performance problems
2. Rendering fonts on the GPU will invalidate anti-aliasing because the GPU and CPU algorithms are different