Page reconstruction and return

In understanding what is reconstruction and the return before, we should first look at how the browser is rendering?

Browser rendering process:

1. HTML script processing, generates the DOM tree (DOM tree contains all HTML tags, comprising a display: none elements and dynamically add js etc.)
2. CSS script processing, generates CSSOM tree (DOM and CSSOM independent data structure)
3. DOM tree and the merge tree as CSSOM render tree, render tree does not include positioning and geometric information. Although, render dom tree and the tree is similar but there are differences. 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, it will not be included in the render tree. Note visibility: hidden hidden element will still included in the render tree, because visibility: hidden would affect the layout (layout), will occupy space.
4. render the content layout tree, each node calculates geometric appearance
5. Each node in the tree is drawn to the rendered screen.

What is reconstruction and the return

重构: While some attribute of the element changes, but these attributes only affect the appearance and style of elements without changing the layout elements, such as the size of the color, background. At this point the trigger browser behavior known as remodeling.
回流: When the layout, size, scale and display elements of change, triggered by the behavior of the browser called reflux. Also, each page will trigger reflux in the first loaded.
Note: reflux will cause redraw and redraw necessarily accompanied by reflux. At the same time, the impact on performance is greater than the reflux reconstruction.

What action will cause redraw reflux

In fact, any action will be to render the elements caused by reflux or redraw the tree, such as:

• Add, delete elements (reflux + redraw)
• Hidden elements, display: none (reflux + redraw), visibility: hidden (only redraw, no reflux)
• Mobile elements, such as changing the top, left (the animate jQuery is to change the top, left not necessarily affect the back - flow), or move to another element of a parent element. (+ Redraw reflux)
• Calcd width such as text or image size changes caused by the change - operation of the style (the operation of the different properties, such as impact is not the same, changing the element size - margins, padding, borders, width and height, content change and height change;)
• There is also a user's operation, such as changing the size of the browser, the browser to change the font size (reflux redraw +)

Optimized browser reflow

Because, a lot reflux spending, so most browsers will be optimized for reflux, the browser will maintain a queue, all cause reflux into the queue redraw operations, and other operations in the queue to a certain or to a certain number of time intervals, the browser will flush the queue, perform a batch. This will allow reflux many times, become a redraw redraw reflux.

---

Although there has been optimizing browser, but some codes may force the browser to advance flush queue, so optimizing the browser might not achieve the effect. When you request by asking for style information to the browser, it will make the browser flush queue, such as:

1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
5. Requested getComputedStyle (), or IE, currentStyle

When you ask some of the properties above, the browser in order to give you the most accurate values, it is necessary flush the queue, the queue may be affected because of the operation of these values. Even if you get the layout information layout and style information element with the recent occurrence or change regardless of the browser will be forced to refresh render queue.

How to reduce reflux, redraw

According to the operation of the trigger reflux and redraw the above, we can see that as long as the reduction of the operation of the render tree (many times more than the combined DOM and style changes), and to reduce the number of requests for style information, we can reduce reflux, redraw, try to use good optimization strategy browser.
Specific practices are:
1. Direct change className, if dynamically change the style, use cssText (consider not optimized browser)
2. Let the elements to be operated "offline processing", dealt with the update:

• Use DocumentFragment cache operation, and trigger a redraw reflux;
• Use display: none technology, reflow and redraw triggered only twice;
• Use cloneNode (true or false) and replaceChild technology, and trigger a redraw reflux;

3. Do not visit often cause property browser flush the queue, if you really want to access, utilize the cache
4. Let the elements from animation flow, reduce the size of returning Render tree (ie allows animation elements from the document flow, use absolute positioning and many more).