Redraw and Reflow

Before the discussion page redraws, reflow. Need to have some understanding of the page rendering process, the page is how to display HTML, CSS, etc. to the browser, the following flowchart shows the browser to the page rendering process. Different browsers may be slightly different. But basically, they are similar.

High-performance Web development-page rendering, redrawing, reflow

1. The browser parses the obtained HTML code into 1 dom trees, each tag in the HTML is 1 nodes in the DOM tree, and the root node is our common Document object (tag). Dom Tree is our use of Firebug or IE Developer toolbar and other tools to see the HTML structure, which contains all the HTML tag, including Display:none hidden, but also useful JS dynamically added elements.

2. The browser parses all the styles (including CSS and browser style settings) into the style structure, and in the process of parsing, it removes the styles that the browser does not recognize, such as IE removes the style from the beginning of the-moz, and Firefox removes the style from the beginning of the _.

3. The DOM tree and the style structure are combined to build the render tree, which is a bit similar to Dom tree, but in fact the difference is very large, the render tree can recognize the style, render Each node in the tree has its own style, and the render tree does not contain hidden nodes (such as display:none nodes and head nodes) because these nodes are not intended for rendering and do not affect rendering, so they are not included in the render The tree. Note that Visibility:hidden hidden elements are still included in the render tree, because Visibility:hidden affects the layout and occupies space. According to the CSS2 standard, each node in the render tree is called box dimensions, Box All properties: Width,height,margin,padding,left,top,border, etc.

4. Once the render tree is built, the browser can draw the page based on the render tree.

Reflow and Redraw

1. When part (or all) of the render tree needs to be rebuilt because of the size, layout, and concealment of the elements. This is called reflux (in fact, I think the re-layout is simpler and clearer). Each page needs at least one reflow, which is the first time the page loads.

2. When some elements in the render tree need to update properties, these properties only affect the appearance, style of the element, without affecting the layout, such as Background-color. It is called redrawing.

Note: As can be seen from the above, reflow will inevitably cause repainting, and repainting does not necessarily cause reflux.

What operations can cause redraw, reflow

In fact, any manipulation of elements in the render tree will cause reflow or repainting, such as:

1. Add, remove elements (reflow + redraw)

2. Hidden elements, Display:none (reflow + Redraw), Visibility:hidden (redraw only, not reflow)

3. Moving elements, such as changing Top,left (the Animate method of jquery is that changing top,left does not necessarily affect reflux), or moving elements into another 1 parent elements. (Redraw + reflow)

4. Operation on style (different effects on various property operations)

5. There is also a user's operation, such as changing the browser size, change the browser font size, etc. (Reflow + redraw)

Let's see how the following code affects reflow and repainting:

var s = document.body.style;

s.padding = "2px"; Reflow + Redraw

S.border = "1px solid red"; Reflow + Redraw again

S.color = "Blue"; Redraw once again

S.backgroundcolor = "#ccc"; Redraw once again

S.fontsize = "14px"; Reflow + Redraw again

Add node, Reflow + Redraw

Document.body.appendChild (document.createTextNode (' abc! '));

Please note how many I have used again.

When it comes to this, we all know that the cost of reflow is higher, and that the cost of reflux is related to how many nodes of the render tree need to be rebuilt, assuming that you are directly manipulating the body, such as inserting 1 elements at the top of the body, which will cause the entire render tree to reflow, which is, of course, more expensive. However, if you are inserting 1 elements behind the body, the reflow of the preceding element will not be affected.

Smart Browser

From the last instance code can see a few lines of simple JS code to cause 6 times around the reflow, redraw. And we also know that the return of the cost is not small, if every JS operation to go back to redraw, the browser may be unbearable. So many browsers will optimize these operations, the browser will maintain a queue, all will cause reflow, redraw operations into the queue, and so on the queue to a certain number of operations or to a certain time interval, the browser will flush queue, a batch processing. This allows multiple reflow and repainting to become a reflow redraw.

While there are browser optimizations, sometimes some of the code we write may force the browser to flush the queue ahead of time, so that browser optimizations may not work. When you request some style information from the browser, the browser will flush the queue, for example:

1. OffsetTop, Offsetleft, offsetwidth, offsetheight

2. Scrolltop/left/width/height

3. Clienttop/left/width/height

4. Width,height

5. Request getComputedStyle (), or IE's currentstyle

When you request some of the properties above, the browser needs to flush the queue in order to give you the most accurate value, because there may be operations that affect these values in the queue.

How to reduce reflow, redraw

Reducing reflow and repainting is essentially the need to reduce the action on the render tree and reduce requests for some style information to make the best use of the browser's optimization strategy. Specific methods are:

1. Do not change the style of the elements of a 1 attributes, it is best to directly change the classname, but ClassName is a pre-defined style, not dynamic, if you want to dynamically change some styles, then use Csstext to change, see the following code:

Bad wording.

var left = 1;

var top = 1;

El.style.left = left + "px";

El.style.top = top + "px";

A better notation.

El.classname + = "className1";

A better notation.

El.style.cssText + = "; Left: "+ left +" PX; Top: "+ top +" px; ";

2. Let the elements to be manipulated "offline", after processing the update together, so-called "offline processing" means that the element does not exist in the render tree, such as:

A) using elements such as documentfragment or div to cache operations, this is mainly used to add elements, we should all use, is to add all the elements to add to the 1 div (this div is also new),

Finally, the DIV is append into the body.

b) First display:none the hidden element, then does all the work on the element, and then displays the element at the end. Operations on Display:none elements do not cause reflow or redraw. So as long as the operation will only have 2 times reflux.

3 do not frequently visit the properties that will cause the browser flush queue, if you do want to access, first read into the variable to cache, and then use the time to read the variable directly, see the following code:

Don't write like that, bro.

for (Loop) {

Elel.style.left = el.offsetleft + 5 + "px";

Elel.style.top = el.offsettop + 5 + "px";

}

So write it better.

var left = El.offsetleft,top = El.offsettop,s = El.style;

for (Loop) {

Left + = 10;

Top + = 10;

S.left = left + "px";

S.top = top + "px";

}

4. Consider how many nodes in the render tree are affected by your actions, and the more impact you have, the more you will spend. For example, many people now use the jquery animate method to move elements to show some animation effects, think about the following 2 ways to move:

Block1 is a position:absolute positioned element that moves to affect all child elements under its parent element.

As it moves, all child elements need to determine whether Block1 's z-index is on its own,

If it is on top of itself, it needs to be redrawn, which will not cause reflux

$ ("#block1"). Animate ({left:50});

Block2 is a relatively positioned element, and this affects the same elements as Block1, but because Block2 is not absolutely positioned

And the change is the MarginLeft attribute, so each change here will not only affect redrawing,

Also causes the return of the parent element and its lower element

$ ("#block2"). Animate ({marginleft:50});

From the network

Redraw and Reflow