Avoid and reduce redraws and reflows in web pages
1. Avoid setting multiple layers of inline styles: Each inline style will cause the browser to re-render. Merging styles into an external class can reduce redraws and reflows.
2. Use CSS preprocessors: such as Sass or Less, which can easily perform operations such as variables and mixins, and convert them to CSS at compile time, which can reduce code redundancy and complexity.
3. Make good use of display:none: Operating on a display:none element can avoid triggering reflow and redrawing. Because DOM operations on display:none will not cause reflow and redraw.
4. Offline processing of elements: Let the elements to be operated be "offline processed" and updated together after processing. This can avoid frequent DOM operations and reduce reflow and redrawing.
5. Changing the class at the end of the DOM tree: Changing the class at the end of the DOM tree can reduce reflow and redrawing, because this can limit the scope of the reflow so that it affects as few nodes as possible.
6. Use CSS3 animation instead of JavaScript animation: CSS3 animation has better performance and can reduce reflow and redraw caused by JavaScript expressions.
7. Use virtual DOM libraries: such as React or Vue, etc., to avoid frequent DOM operations and optimize performance.
8. For complex DOM operations, you can use Document Fragment: apply all DOM operations on the document fragment and then add it to the document. This can reduce the number of DOM operations and optimize performance.
9. Avoid using CSS expressions (for example: calc()): CSS expressions will cause the browser to re-render each calculation.
10. In terms of JavaScript, to avoid frequent manipulation of styles, it is best to define the style list as a class and change the class attribute at once; to avoid frequent manipulation of DOM, you can create a documentFragment, apply all DOM operations on it, and finally add it to the document middle.