Reduce browser reflow and repaint

1. Avoid frequent DOM operations on the document, if you do need to do so in a off-document way, including but not completely including the following:
(1). Remove the element from document first, and then put the element back in place when you have finished modifying it.
(2). Set the display of the element to "none" and modify the display to the original value after the modification is complete.
(3). If you need to create multiple DOM nodes, you can use DocumentFragment to join the document once created
2. Centrally modifying Styles
(1). Modify the attributes on the element style as little as possible
(2). Modify the style as much as possible by modifying the ClassName
(3). Set style values with the Csstext property
3. Cache Layout Property Values
For values of non-reference types in the Layout property (numeric type), if multiple accesses are required, they can be stored in local variables on a single visit, followed by local variables, to avoid rendering the browser every time the property is read.
var width = el.offsetwidth; var scrollleft = El.scrollleft;
4. Set the position of the element to absolute or fixed
When the element's position is static and relative, the element is in the DOM tree structure, and the browser renders the entire page when an action on the element needs to be re-rendered. Setting the element's position to absolute and fixed allows the element to be detached from the DOM tree structure, and the browser needs to render only that element and the elements below it, to some extent shortening the browser rendering time, This is especially worth considering in today's more and more JavaScript animations.

Reduce browser reflow and repaint