1 – return
When the page layout, geometry changes (size, layout, display: None, etc.), the page needs to flow back.
2 – redrawn
Redraw is triggered when attributes (background-color, etc.) change that only affect the appearance and style of elements, but not the layout
3 – The relationship between reflux and redrawing
① Reflux will inevitably cause redrawing
② Redrawing may not cause reflux
=> Backflow costs more than redraw
4 – Reduce redrawing and reflow
1 – Use cssText or modify the CSS class
const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
// The above code can be optimized to
const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px; ';
Copy the codeconst el = document.getElementById('test');
el.className += ' active';
Copy the code2 – Using document Fragments
Combine multiple DOM operations into one DOM operation
3 – Complex animations use absolute positioning
For complex animation effects, which often cause backflow redraw, we can use absolute positioning to take it out of the document stream. Otherwise, it will cause frequent backflow of the parent element and subsequent elements