Re-production and reflow

Before the discussion redraw, reflow. Need to have some understanding of the rendering process, how to put HTML in conjunction with CSS and other explicit to the browser, the next
The flowchart shows the process of rendering the browser pair. Different browsers may be slightly different. But basically, they are similar.
1. The browser parses the acquired HTML code into 1 dom trees, each tag in the HTML is 1 nodes in the DOM tree, and the root node is the one we often have.
Document Object (Some HTML tags, including display:none hidden, and? JS dynamically added elements and so on.
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 sample
, IE will remove the style from the beginning of the-moz, Firefox will remove the beginning of the _ style.
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?, Render
Tree recognizes styles, and every node in the render tree has a?? The style,? And the render tree does not contain hidden nodes (? Nodes such as Display:none,
and the head node) because these nodes do not have to be rendered, and do not affect rendering, so they are not included in the render tree. Attention
Visibility:hidden hidden elements will still be included in the render tree, because Visibility:hidden will affect the layout and will occupy space. Under
CSS2 standard, each node in the render tree is called box dimensions, all of the box properties:
Width,height,margin,padding,left,top,border and so on.
4. Once the render tree is built, the browser can be drawn according to the render tree?? The
Reflow and Redraw
1. When the part (or all) of the render tree is changed because of the size ruler of the element, layout, hiding, and so on? Need to be rebuilt. This is called reflux (in fact I feel
To make the re-layout easier and clearer). Each??? Less need for the second reflux, is in?? At the time of the first load.
2. When the elements in the render tree need to be updated, these properties only affect the appearance of the element,?
Background-color. It is called redrawing.
Note: From the above, it can be seen that reflux will cause repainting, re-painting will cause reflux.
What operations can cause redraw, reflow
In fact, any action on the elements in the render tree will cause reflow or repainting, for example:
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 the Top,left (the animate method of jquery is, changing top,left does not affect reflux), or moving the element to another 1? Yuan
Sozhong. (Redraw + reflow)
4. Operation on style (for different attribute operations, no effect on the sample)
5. What is the operation of the user, such as changing the browser??, changing the browser font?? ET (reflow + redraw)
Let's see how the following code affects reflow and repainting:
The code is as follows:
var s = document.body.style;
s.padding = "2px"; Reflow + Redraw
S.border = "1px solid red"; Re-secondary reflow + redraw
S.color = "Blue"; Redraw again.
S.backgroundcolor = "#ccc"; Redraw again.
S.fontsize = "14px"; Re-secondary reflow + redraw
Add node, then reflow + redraw
Document.body.appendChild (document.createTextNode (' abc! '));
Please note that I am on?? The number of times.
Speaking of Which? Home all know reflow? The cost of re-painting is much more expensive, and the return costs are related to how many nodes of the render tree need to be rebuilt, assuming you're directly
As body, as in the body of the first, insert 1 elements, will cause the entire render tree reflux, the cost of course, but if it refers to the body after?
? 1 elements will not affect the reflow of the front element.
Smart Browser
Can you see it from the previous instance code?? The simple JS code causes about 6 times of reflux, repainting. And we know that the return costs are not?
If every JS operation goes back to redraw, the browser may be overwhelmed. So many browsers optimize these operations, and the browser will maintain 1 teams
column, all the operations that cause reflow and redraw are placed in this queue, the number of operations in the queue, or the scheduled time interval, the browser
Will flush the queue, into the?? Batches of processing. This allows multiple reflow and repainting to be re-painted.
Despite the browser optimizations, sometimes we write some code that might force the browser to flush the queue ahead of time so that the browser's optimizations may not
To do it. When you ask for a style message to the browser, you let the browser 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 ask for some properties, the browser needs to flush the queue in order to give you the most accurate value, because the queue may have an effect on those values.
Operation.
How to reduce reflow, redraw
Reducing reflow and redrawing is actually a need to reduce the action on the render tree and reduce the request for style information, as much as possible. Good browser optimization strategy
Slightly. The specific law has:
1. Do not change the style attributes of a 1 element, it is best to directly change the classname, but ClassName is a predefined style, not dynamic, if
Do you want to change the style dynamically, so that the csstext to change,? Code:
Bad wording.
var left = 1;
var top = 1;
El.style.left = left + "px";
El.style.top = top + "px";
? A better formulation
El.classname + = "className1";
? A better formulation
El.style.cssText + = "; Left: "+ left +" PX; Top: "+ top +" px; ";
2. Let the element to be manipulated go in? " Off-line processing ", after processing the update, this? So-called" offline processing "so that the element does not exist in the render tree,?
Such as:
A) documentfragment, or Div, and other elements into the cache operation, this main? When adding elements, the home should have been, is the first
Add all the elements you want 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 the element into the operation, and finally the element. Because of the elements of Display:none.
does not cause reflow, repainting. 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 into the cache, the next time when the direct read
Take the variable, right? Code:
Don't write like that, bro.
for (Loop) {
El.style.left = el.offsetleft + 5 + "px";
El.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 of the nodes in the render tree are affected by your operation, and the more impact you have, the more you will spend.? So many now?
? jquery's animate move element to show?? Some of the animation effects, think about the next? 2 Moving methods:
Block1 is the element that the Position:absolute locates, and it moves to affect it? All the elements under the element.
Because in the process of its movement, all the elements need to determine whether the Block1 Z-index is in?? On?,
If it is in the?? , you need to redraw it, and it doesn't cause reflux.
$ ("#block1"). Animate ({left:50});
Block2 is a relatively positioned element, the element of influence and Block1, but because of block2? Absolute positioning
? and change the MarginLeft attribute, so this? Each change will not only affect redrawing,
It also causes the return of the element and its lower element
$ ("#block2"). Animate ({marginleft:50});

Re-production and reflow