What is reflux (rearrangement reflow)?
Reflux (rearrangement reflow): DOM tree rendering, just modify the DOM or modify the shape and size of elements, will trigger reflow, reflow time, the browser will be affected rendered good part failure, and reconstruct this section after the completion of reflow, the browser will repaint the affected portion of the screen
(A title, following yesterday's Daily: display: none and visibility: hidden
When the display show and hide elements occupy space show, it does not occupy space hidden, hidden around the DOM structure changes, so it is necessary to re-render
When visibility display and hide elements, whether to show or hide, occupy space, hide around the DOM structure remained unchanged, there is no need to re-render. )
What is redraw (repaint)?
Redraw (repaint): When we change the style changes to the DOM caused, but did not affect the geometric attributes, the browser does not need to be recalculated element geometric attributes, you can directly draw a new style for the element, skip links reflux this process is called redraw.
Conclusion: reflux must redraw will occur, not necessarily redraw reflux occurs
There is frequent interaction of reflux to redraw the page, this process will be a large degree of impact performance because the required cost much higher proportion painted, so reflux, reflux can not use the redraw.
How to reduce reflux, redraw?
Reduce reflux, redrawing is to reduce the operation of the DOM
1. Direct change className, if the dynamic change pattern, using the cssText (provided more reduction inline style)
2. Let the elements to be operated "offline processing", dealt with update
When a DocumentFragment cache operation, trigger a reflow and redraw
Use display: none technology, only two trigger reflux and redraw
Use cloneNode (true or false) and replaceChild technology, trigger a reflow and redraw
3. Do not visit often cause property browser flush the queue, if you really want to access, use of cache
4. Let the elements from animation flow, reduce render scale tree
The sacrificial smoothness for speed
6. Avoid using table layouts
Avoid using javascript expression in 7.IE