Reduce browser reflow and repaint_html/css_WEB-ITnose

1. Avoid frequent DOM operations directly on the document. If necessary, you can do it off-document. Specific methods include but not exclusively include the following:
(1). First delete the element from the document, and then put the element back to its original position after completing the modification
(2). Set the display of the element to "none", and then modify the display to Original value
(3). If you need to create multiple DOM nodes, you can use DocumentFragment to create them and add them to the document at once
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 the style value through the cssText attribute
3. Cache the Layout attribute value
For non-reference type values ​​(numeric types) in the Layout attribute, if you need to access them multiple times, you can first store them in local variables during one access, and then use the local variables to avoid reading each time. Causes browser rendering when fetching attributes.
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;
4. Set the position of the element to absolute or fixed
When the position of the element is static and relative, the element In the DOM tree structure, when an operation on an element requires re-rendering, the browser will render the entire page. Setting the position of an element to absolute and fixed can make the element exist independently from the DOM tree structure, and the browser only needs to render the element and the elements below it when it needs to render, thus shortening the time to some extent. Browser rendering time, which is especially worth considering today with the increasing number of Javascript animations.