How to reduce browser reflow and repaint_javascript tricks

1. Avoid frequent DOM operations directly on the document . If necessary, you can use off-document methods. Specific methods include but not exclusively include the following:

(1). First delete the element from the document, 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 the original value after completing the modification
(3). If you need to create multiple DOM nodes, you can use DocumentFragment to create it and add it to document

at once.

2. Centrally modify styles

(1). Modify the attributes on the element style as little as possible
(2). Try to modify the style by modifying className
(3). Set style value through cssText attribute

3. Caching Layout attribute values ​​

For the non-reference type value (numeric type) in the Layout attribute, if you need to access it multiple times, you can first store it in a local variable during one access, and then use the local variable. This can avoid reading the attribute every time. Causes browser rendering.
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 is in the DOM tree structure. When an operation on the 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.

The above are some things I personally summarized about reducing browser reflow and repaint. I hope you all like it.