What are Repaint and Reflow?

1. What are repaint and reflow?

A page consists of two parts:

DOM: describe the structure of the page

Render: describes how DOM nodes (nodes) are displayed on pages.

When the attributes of a DOM element change (such as color), the browser notifies render to re-depict the corresponding element. This process is called repaint.

If this change involves the layout of elements (such as width), the browser discards the original attributes, recalculates the changes, and passes the results to the render to re-depict the page elements. This process is called reflow.

These two processes consume the performance of the browser. From the gap between the IE series and the Chrome rendering page speed, we can see that the rendering engine computing value and rendering are not necessarily efficient, repaints or reflow occurs every operation on the element. Therefore, if you do not pay attention to DOM interaction, the page performance will be low.

2. Reflow

Reflow is triggered when:

Add/delete visible elements

Element location, size, and content change

First page rendering

Change the browser window size

Fortunately, the browser processes reflow similar to the Output Control of PHP-put reflow into a queue for flush when it reaches a certain degree or time limit. however, unfortunately, this process may be forced to run in advance-as long as you use any of the following to force the browser to flush, a reflow is generated:

OffsetTop, offsetXXX...

ScrollTop, scrollXXX...

ClientTop, clientXXX...

GetComputedStyle/currentStyle

3. How to optimize

The first step is to reduce the layout operations on the DOM. Suppose we want to dynamically change the size of an element to 100 * Px:

Copy to ClipboardReference: [www.bkjia.com] var el = document. getElementById ("id ");
El. style. width = 100px;
El. style. height = 100px;
// Suppose there are two els: el2, el3
El2.style. width = el. style. width * 1.5;
El3.style. width = el. style. width * 2;

If you write this statement, the performance will be better:

El.style.css Text = "width: 100px; height: 100px ;";
// Or el. className = "square ";
Var width = el. style. width;
El2.style. width = width * 1.5;
El3.style. width = width * 2;

Use DocumentFragment and cloneNode whenever possible during DOM operations:

Copy to ClipboardReference: [www.bkjia.com] // DocumentFragment
Var fm = document. createDocumentFragment ();
Var;
For (var I = 0; I <20; I ++ ){
A = document. createElement ("");
A. href = I + ". html ";
A. innerHTML = "page" + I;
Fm. appendChild ();
}
Document. getElementById ("tar"). appendChild (fm );

// CloneNode
Var ul = document. getElementById ("ul ");
Var clone = ul. cloneNode (true); // true = deep copy
Var li;
For (var I = 0; I <20; I ++ ){
Li = document. createElement ("li ");
Li. appendChild (document. createTextNode (I ));
Clone. appendChild (li );
}
Ul. parentNode. replaceChild (clone, ul );

The general optimization ideas are as follows:

Detach an element from a DOM stream (clone, fragment, position: absolute, absolute positioning is especially useful for animation or drag objects)

Perform Various operations on stripped Elements

Restore stripped elements to the DOM stream

Note:

There is a bug in IE lte 8: hover. If a large number of elements using this selector appear, the page response speed will be reduced.

The firstElementChild (), querySelectorAll () and other APIs can be used in large quantities without modifying the older browsers. The implemented functions are similar to those of CSS selectors and traversal functions in libraries such as jQuery.

In addition, we try to use delegation to bind events, that is, to make rational use of the event's bubble feature. I think this has a small impact on repaint & reflow, but for code optimization, reusability and flexibility are of great help, so you can continue when you are free.