Write better than my words, have logic!
The browser's rendering process
1, the browser parses the HTML source code, and then creates a DOM tree.
In the DOM tree, each HTML tag has a corresponding node, and each text will have a corresponding text node.
The root node of the DOM tree is documentelement, which corresponds to the HTML tag.
2, the browser parses the CSS code, calculates the final style data.
She ignores the illegal syntax in CSS code.
When parsing CSS, the precedence is defined in the following order: Browser default settings, user settings, outer chain style, inline style, style in HTML.
3, build the DOM tree, and after calculating the style data, the next step is to build a rendering tree (rendering trees).
The render tree and the DOM tree are a bit like, but there are differences. The DOM tree corresponds completely to the HTML tag one by one, but the render tree ignores elements that do not need to be rendered, such as head, Display:none elements, and so on.
And each line in a large piece of text is a separate node in the render tree.
Each node in the render tree is stored with the corresponding CSS property.
4, once the render tree is created, the browser can draw the page directly to the screen based on the render tree.
For example, there is an HTML code like this:
<title>beautiful page</title>
<body>
<p>
Once upon a time there was
A looong paragraph ...
</p>
<div style= "Display:none" >
Secret message
</div>
<div></div>
...
</body>
Then the DOM tree is exactly the same as the HTML tag one by one, as follows:
DocumentElement (HTML)
Head
Title
Body
P
[Text node]
Div
[Text node]
Div
Img
...
The render tree is different, and she has only those elements that need to be drawn, so the head and the hidden Div will not appear in the render tree.
Root (Renderview)
Body
P
Line 1
Line 2
Line 3
...
Div
Img
...
Each page will be re-queued at least once during initialization. Any modifications to the render tree may result in the following two actions:
1, rearrange
Is that part of the rendering tree must be updated and the size of the node has changed. This triggers the reflow operation.
2, Redraw
Some nodes need to be updated, but do not change the shape of his collection, such as changing the background color, which triggers redrawing.
Any of the following actions will trigger redraw or reflow:
Adding or removing DOM nodes
Set Display:none; (rearrange and redraw) or Visibility:hidden (Reflow only)
Moving elements in a page
Add or modify a style
The user changes the window size, scrolls the page, etc.
See an example:
var bstyle = Document.body.style; Cache
bstyle.padding = "20px"; Reflow, repaint
Bstyle.border = "10px solid red"; Another reflow and a repaint
Bstyle.color = "Blue"; Repaint only, no dimensions changed
Bstyle.backgroundcolor = "#fad"; Repaint
Bstyle.fontsize = "2em"; Reflow, repaint
New DOM Element-reflow, repaint
Document.body.appendChild (document.createTextNode (' dude! '));
Some redraw operations are much more expensive than other operations. For example, if you make a change to a BODY element, it does not necessarily result in a large number of other nodes being updated, but moving an element to the top of the page may cause all other nodes to be re-queued, which can be costly.
The browser will make a lot of optimizations for this change because the rendering tree changes result in redrawing or rearrangement operations that can be expensive.
One strategy is not to do the operation immediately, but to do it in bulk. For example, the modification of your script to the DOM in a queue, after the end of all the operation of the queue only need to draw once.
However, sometimes the script may cause the browser's batch optimization to fail, and it may be necessary to redraw the page before emptying the queue (meaning redraw or rearrange). For example, you get these styles from a script:
OffsetTop, Offsetleft, offsetwidth, offsetheight
Scrolltop/left/width/height
Clienttop/left/width/height
getComputedStyle (), or currentstyle in IE
Because the browser must give you the most recent value, it will trigger the drawing of the page as soon as you take these values. This way you can modify the styles in batches and then draw them one at a time is not available.
1, do not modify the properties individually, preferably by a classname to define these changes
Bad
var left = 10,
top = 10;
El.style.left = left + "px";
El.style.top = top + "px";
Better
El.classname + = "Theclassname";
2. Place a large number of modifications to the node outside the page
Use DocumentFragment to make changes
Clone node, make changes in the node after clone, and then replace the previous node directly
Hide nodes with Display:none (directly causing a reflow and redraw), make a lot of changes, and then display nodes (again reflow and redraw), with a total of only two reflow.
3, do not get the calculated style frequently. If you need to use a computed style, it's best to temporarily save it instead of reading it directly from the DOM.
4, in general, always take into account the existence of the rendering tree, considering how much of a drawing operation your one modification will cause.
The animation of an absolutely positioned element, for example, does not affect most other elements.
Transfer from http://blog.csdn.net/lihongxun945/article/details/37830667#
The process of rendering the page by the browser, as well as rearrange and redraw (go)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
