1. The concept of reflux and redraw
Reflux (reflow): When the width and height of the render tree of elements, the layout, display or hide the internal text element junction structure changes, and can affect their parent element, dating back even more ancestor element is changed, It can cause internal elements around or even re-rendering the entire page, page reconstruction occurs, the reflux arises.
Redraw (repaint): structure element (width and height, layout, display hidden, internal text size) has not changed, only the appearance is changed style elements, such as background color, text color inside, the border color. At this time will cause the browser to redraw, apparently redraw faster than reflux.
Reflux will trigger the redraw, redraw necessarily trigger reflux.
2. The impact on performance reflux redraw
Here for a knowledge point: Rendering js css styles will affect the execution time, so slow to load js script. For the following reasons:
A web browser rendering time will enable the two threads: a rendering javascript script, that is another rendering ui css style rendering. But two threads are mutually exclusive, when the javascript thread running ui thread is aborted pause, and vice versa. Because when ui thread runs the page is rendered, js script will inevitably involve changing some style on the page view, in order to make this change more accurately js script had to wait ui thread rendering is complete when it is to perform.
So when elements of a page style changes frequently when the ui thread will continue to render, resulting in belated reaction js code, the situation Caton. Reflow and redraw will make the ui-threaded rendering time longer, too many will make the site performance deteriorates, so to minimize reflow and repaint.
3. How to reduce reflux and redraw
Has led reflux occurs as follows:
- Change the window size
- Change text size
- Change content, such as user input box Qiaozi
- Activation pseudo-class, such as: hover
- Operating class attribute
- DOM script operations
- OffsetWidth computing and offsetHeight
- Setting style properties
Css corresponding attributes are as follows:
- Box model related properties
- Positioning and float property
- The internal structure of the text node
Leading to redraw the css properties as follows:
Reduce reflux and redraw attention to the following points:
| 1: instead of the top, left, margin-top, margin-left ... with the displacement properties transform 2: opacity instead of visibility, but to also have translate3d or translateZ these attributes can create layers of existence can prevent backflow But the second point after my experiments and found that if we do not transform: translateZ (0) with opacity, then still produce reflux, but it is only visibility not only produce redraw reflux The opacity plus transform: will not occur reflux and redraw after translateZ / 3d this property 3: Do not use the code dom js provided a plurality of element patterns, instead of only a select className. 4: If you do need to use js dom to set multiple styles you can hide this dom first, and then set them 5: Do not get dom styles such as in the cycle: offsetWidth, offsetHeight, clientWidth, clientHeight ... these. Browser has a buffering mechanism for returning that will be stored in a plurality of return inside the stack, when the stack is full browser will trigger a one-time change all style and refresh the stack. But if you get the actual style of these elements several times, the browser in order to give you an accurate answer will constantly refresh the buffer stack, resulting in increased page reflux. So in order to avoid this problem, you should use a variable to hold the loop in vitro. 6: Do not use table layouts, as each row of the table even every cell in the style update will cause the entire table layout again 7: The speed of the animation business decision in accordance with demand. 8: For frequent changes of its elements should be added to a transform property, for a video using the video tag 9: You can turn on GPU acceleration when necessary, but not abuse |
Related reference: