Before discussing page repaints, reflows. You need to have some understanding of the rendering process of the page, how the page displays html combined with css and so on to the browser,
The following flowchart shows the processing flow of the rendering of the page by the browser. It may be slightly different for different browsers. But basically it's all similar.
1. The browser parses the obtained HTML code into a DOM tree, each tag in the HTML is a node in the DOM tree, and the root node is our commonly used document object. The DOM tree contains all HTML tags, including display:none hidden, and elements dynamically added with JS, etc.
2. The browser parses all styles (user-defined CSS and user agent) into style structures. During the parsing process, styles that are not recognized by the browser will be removed. For example, IE will remove styles starting with -moz, while FF will remove styles. style that starts with _.
3. The render tree is built after the DOM Tree and the style structure are combined. The render tree is similar to the DOM tree, but it is very different. The render tree can recognize the style. Each NODE in the render tree has its own style, and the render tree does not contain hidden The nodes (such as display:none nodes, and head nodes), because these nodes will not be used for rendering, and will not affect the rendering, so they will not be included in the render tree. Note that elements hidden by visibility:hidden will still be included in the render tree, because visibility:hidden will affect the layout and take up space. According to the CSS2 standard, each node in the render tree is called Box (Box dimensions), and the page element is understood as a box with padding, margins, borders and position.
4. Once the render tree is constructed, the browser can draw the page according to the render tree.
Reflow and Repaint
1. When part (or all) of the render tree needs to be rebuilt due to changes in the size, layout, hiding, etc. of elements. This is called reflow. Every page needs at least one reflow, which is when the page first loads. During reflow, the browser will invalidate the affected part of the rendering tree and rebuild this part of the rendering tree. After the reflow is completed, the browser will redraw the affected part to the screen, and this process is called redrawing.
2. When some elements in the render tree need to update properties, and these properties only affect the appearance and style of the elements, but not the layout, such as background-color. It's called repainting.
Note: Reflow will always cause a repaint, and a repaint will not necessarily cause a reflow.
When does reflow occur:
Reflow is required when the page layout and geometry properties change. Browser reflow occurs when:
1. Add or remove visible DOM elements;
2. The position of the element is changed;
3. Element size changes - margins, padding, borders, width and height
4. Content changes - such as changes in the width and height of calculated values caused by changes in text or image size;
5. Page rendering initialization;
6. The size of the browser window changes - when the resize event occurs;
smart browser
We also know that the cost of reflow is not small. If every JS operation is reflowed and redrawn, the browser may not be able to stand it. Therefore, many browsers will optimize these operations. The browser will maintain a queue and put all operations that will cause reflow and redraw into this queue. When the operations in the queue reach a certain number or a certain time interval, the browser will The queue will be flushed and a batch will be performed. This will turn multiple reflows and redraws into one reflow redraw.
Although there are browser optimizations, sometimes some code we write may force the browser to flush the queue in advance, so the browser optimization may not work. When you request some style information from the browser, it will let the browser flush the queue, such as:
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
5. Requested getComputedStyle(), or IE's currentStyle
When you request some of the above properties, the browser needs to flush the queue in order to give you the most accurate value, because there may be operations in the queue that affect these values. Even if you get the layout and style information of an element independent of the most recent or changed layout information, the browser will force a refresh of the rendering queue.
How to reduce reflow and redraw
Reducing reflow and redrawing actually means reducing the operations on the render tree (merging multiple DOM and style modifications), reducing requests for some style information, and making good use of the browser's optimization strategy. The specific methods are:
1. Change the className directly, if you change the style dynamically, use cssText (consider unoptimized browsers)
2. Let the elements to be operated perform "offline processing", and update them together after processing
a) Use DocumentFragment for cache operation, triggering one reflow and redrawing;
b) Using display:none technology, triggering only two reflows and redrawing;
c) Using cloneNode(true or false) and replaceChild technology, triggering one reflow and redrawing painted;
3. Don't frequently access properties that will cause the browser to flush the queue. If you really want to access it, use the cache
4. Keep elements out of the animation flow and reduce the size of the reflowed Render Tree