1. Avoid frequent DOM operations directly on the document . If you really need it, you can use off-document method. The specific methods include but do not completely include the following:
(1). First delete the element from the document, and after completing the modification, put the element back to its original position
(2). Set the display of the element to "none", and after completing the modification, modify the display to the original value
(3). If you need to create multiple DOM nodes, you can use DocumentFragment to add the document at one time after creating it using DocumentFragment
2. Centrally modify the style
(1). Modify the attributes on the element style as little as possible
(2). Try to modify the style by modifying the className
(3). Set style value through cssText property
3. Cache Layout attribute value
For values of non-referenced types in Layout attributes (numerical types), if multiple accesses are required, they can be stored in the local variable first in one access, and then used local variables, which can avoid rendering by the browser every time the attribute is read.
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;
4. Set the position of the element to absolute or fixed
When the position of an element is static and relative, the element is in the DOM tree structure. When an operation on the element needs to be re-rendered, the browser will render the entire page. Setting the position of an element to absolute and fixed can make the element separate from the DOM tree structure, and when the browser needs to render, it only needs to render the element and the element below the element, thereby reducing the browser rendering time to some extent, which is especially worth considering in today's increasing number of Javascript animations.
The above are some of the matters summarized by me about reducing browser reflow and repaint. I hope everyone likes it.