Reduce the reflow and repaint and reflowrepaint of the browser

Reduce the reflow and repaint and reflowrepaint of the browser

1. Avoid frequent DOM operations on the document directly. If necessary, use the off-document method. The specific methods include but do not fully include the following:
(1) first Delete the element from the document, and then put the element back to its original position after modification.
(2) set the display of the element to "none". After the modification, change the display to the original value.
(3) If you need to create multiple DOM nodes, you can use DocumentFragment to add the document
2. Modify styles in a centralized manner
(1). Modify as few attributes as possible on the element style.
(2) try to modify the style by modifying the className
(3). Set the style value through the cssText attribute
3. cache Layout attribute values
For non-reference type values (numeric type) in the Layout attribute, if multiple accesses are required, you can store the values in the local variables for one access, and then use the local variables, this prevents rendering of 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 or relative, the element is in the DOM tree structure. When an operation on the element needs to be re-rendered, the browser renders the entire page. Setting the position of an element to absolute and fixed can separate the element from the DOM tree structure, the browser only needs to render the element and the element at the bottom of the element to shorten the rendering time of the browser to a certain extent, this is particularly worth considering in today's more and more Javascript animations.