What is reflow?
Reflow: Rendering the DOM tree. Whenever you modify the DOM or the size of an element, reflow is triggered. When reflow is performed, the browser invalidate the affected part of the rendering and reconstruct it
(Yesterday’s daily question: Display :none and visibility:hidden When display displays and hides elements, display takes up space while hiding does not. DOM structure changes before and after hiding, so you need to re-render. When display and hide elements, either display or hide, Both take up space, so the DOM structure does not change before and after hiding, so there is no need to re-render.
What is Repaint?
Repaint: When a DOM change results in a style change that does not affect the geometry, the browser can repaint the element without recalculating the geometry, skipping the backflow process.
Conclusion: Redrawing must occur in backflow, and redrawing does not necessarily occur in backflow
There are frequent backflow and redrawing in page interaction, which will greatly affect performance, because the cost of backflow is much higher than that of drawing. So, if you can use redrawing, do not use backflow.
How to reduce backflow and redraw?
Reducing backflow and redrawing is reducing manipulation of the DOM
1. Change the className directly, or use cssText if changing the style dynamically (reduce the number of inline styles)
2. Allow the elements to be processed offline and then updated together
When a DocumentFragment is cached, a backflow and redraw are triggered
Using the display: None technique, only two reflows and redraws are raised
Use cloneNode(True or False) and replaceChild techniques to cause a backflow and redraw
3. Do not frequently access attributes that cause browser flush queues. If you do, use caching
4. Take elements out of the animation flow and reduce the size of the Render tree
Sacrifice smoothness for speed
6. Avoid table layout
7. Avoid javascript expressions in IE