Dom,dom,dom, the important thing to say 3 times

　　Dom tree vs. render tree

This should all be known. is the user request HTML down after the browser rendering engine basic work in two concepts.

　　　

Copy a diagram, the process is probably: Parse HTML build dom tree, render tree build, render tree layout, draw the rendering tree.

One thing to note here is that the DOM tree and the render tree are not simple one by one correspondence. The render tree does not contain nodes that do not require rendering. For example, head, title and so on, Display:none will not have, there are some settings position:absolute,fixed, the construction of the render tree is based on the actual situation.

　　Redraw (redraw) and reflow (reflow)

　　Literally it's understandable, redrawing is redrawing, rearrangement is refactoring the render tree. These two are very heavy operations, for example, the table tree shows hidden, the browser needs to rearrange, redraw, if the child node is more, it is possible that the page is stuck (IE6, 7 such an antique is easy to do so). So this kind of thing we try to do less, that is, to write JS as far as possible less of this type of code.

The rearrangement is usually caused by the following operation (use as little as possible).

1. Add, remove visible DOM elements (Visibility:hidden also count, not for why)
2. Change the position of the element
3. Changes in element size, i.e., property changes in the box model
4. Content changes (text is longer, image size changes)
5. Browser pane changes size
6. Get some properties (offset**,scroll**,client**)

　　Minimize Redraw and Reflow

1, merge CSS operation for one operation

2, when to bulk modify the DOM, the element is removed in the Chinese file flow, the use of multiple changes, and finally bring the elements back into the document. (set Display:none; use documentfragment;clone one node)

3. Cache to variables when you need to get the property values that cause the browser to reflow frequently.

4. The element that will need to be re-arranged multiple times (for example, animation), the Position property is set to absolute or fixed, leaving it out of the document flow so that its changes will not affect other elements.

　　DOM is really slow.

　　If ECMAScript as an island, Dom as an island, Dom access as a bridge, every time DOM access is required "bridge fee." Too much, the higher the cost, the more it consumes performance. So try to minimize access to the DOM. For example, the cache gets down the DOM element.

Dom,dom,dom, the important thing to say 3 times