Introduction to reflux and redraw the front end

Reflux and redraw

1. When a part (or all) because of the size of the element size, layout, hide and other changes in the render tree and needs to be rebuilt. This is called reflow (reflow). Each page needs to reflux at least once, when the page is first loaded. When reflux, the browser will make part of the tree affected by the failure to render and re-render this part of the tree structure, after the completion of the reflux, the browser will repaint the affected portion of the screen, the process becomes redrawn.

2. When the render tree some elements need to be updated attributes, but these attributes only affect the element of appearance, style, and will not affect the layout, such as background-color. It is called is called redraw.

Note: reflux will cause redraw and redraw will not necessarily lead to reflux! ! !

When reflux occurs:

When the page layout and geometric properties change needs to reflux. The following happens browser reflux:

1, add or remove visible DOM element;

2, the position changing element;

3, changing the element size - margins, padding, borders, width and height

4, content changes - such as text or image size is changed to change the calculated width and height changes caused;

5, page rendering initialization;

6, the browser window size is changed --resize event;

How to reduce reflux, redraw

Reduce reflux, in fact, is the need to reduce redraw operation on the render tree of the (many times more than the combined DOM and style changes), and to reduce the number of requests for information style, try to use good optimization strategy browser. Specific methods are:

1. Direct change className, if dynamically change the style, use cssText (consider not optimized browser).

2. Let the elements to be operated "offline processing", dealt with update

a) using DocumentFragment cache operation, and trigger a reflux redraw;
B) using the display: none technology, initiator and refluxed redraw only twice;
C) using cloneNode (true or false) and replaceChild technology, and trigger a heavy reflux painted.

3. Do not visit often cause property browser flush the queue, if you really want to access, use of cache

4. Let the elements from animation stream, reducing the size of returning Render Tree