What happens when loading html
When the page loads, the browser parses the HTML code to get into a DOM tree, DOM tree contains all HTML tags, including display: none to hide, as well as with elements such as JS dynamically added.
All style browser (user-defined CSS and user agents) to resolve style structure
constructed render tree after DOM Tree structure and style compositions, render tree similar DOM tree, but great difference because pattern recognition can render tree, each nODE render tree has its own style, and render tree does not contain hidden nodes (such as display: none of the nodes, as well as head node), because these will not be used to render nodes, and will not affect the presentation, so it will not be included in the render tree. My own understanding is that simple DOM Tree and we wrote together after CSS, rendering the render tree.
What is reflux
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, this time is certain reflux occurred, because to build render tree. 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.
What is redrawn
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.
the difference:
They are very different:
reflux will cause redraw and redraw will not necessarily lead to reflux. For example: Only the color change will only occur when redraw without causing reflow
when the page layout and geometric properties change needs to reflux
such as: adding or removing visible DOM element, the element position change, change the element size - margins , fill, border, width and height, content change
Extended:
Browser help
So we can learn to draw the proportion of the cost of higher reflux, reflux spending with render tree how many nodes need to rebuild a relationship
because of the existence of these mechanisms, the browser will help us to optimize these operations, the browser will maintain 1 queues, all cause reflux into the queue redraw operations, and other operations in the queue to a certain number or to a certain time interval, the browser will flush the queue, perform a batch. This will allow reflux many times, become a redraw redraw reflux.
Their optimization
But by the browser than on their own, we can change some of the wording reduce reflux and redraw
such as changing the style of the time, not to change the style of each of them, but directly change className is necessary to use cssText but be aware that there is a problem, will original cssText cleared, such as the original style has 'display: none;', then after performing the above JS, display was deleted.
To solve this problem, a method may be employed cssText accumulated, but does not support IE accumulated, add a semicolon in front can be solved.
There add a node, such as when you want to add a div which has three sub-elements p, if you add div p add three times on the inside, so that trigger reflux and redrawn many times, we can use cloneNode (true or false) to avoid, once to add to all the good clone again appened like, there are many other ways is not going to say