Foreword
Recent research in virtual dom, and then they review research from reflow ( reflow ) and redraw ( the repaint ) a.
Reflux and redraw, it seems like everyone is familiar with, but to specifically say they can not tell what is coming. Now I was finishing my slightly:
Browser rendering process
Before understanding of these two concepts, we take a look at the browser rendering workflow. Here at webkit rendering engine, for example
- After the browser requests to html document, parse html into dom Tree
- css is parsed into css style rules
- After the completion of the analysis, the binding dom Tree structure and style rules render tree
- Calculate the position and size of the browser render tree rendering each object, i.e., the layout (layout)
- Finally, drawing (painting)
Reflux and redraw
Reflow (reflow)
When the size of the element size, layout, and other hidden altered by the render tree part (or all) rebuilding, known as reflux. Each page at least once into the reflow time on the page first loads. 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.
Redraw (repaint)
When the render tree some elements need to be updated attributes that affect only the appearance of the elements of style, without affecting element size, layout, hidden, such as background-color, is called redraw.
Note: reflux will cause redraw and redraw will not necessarily lead to reflux.
The occurrence of reflux
- Visible element size changes, such as width, height, margin, padding and other property change caused by the size change
- Trigger window resize event
- Change elements of the display property
- Changing the position of the element
- and many more
Performance Optimization
Reflux and redraw very impact web performance because every re-parse html and css is then constructed render tree, need to go through a lot of computation, this process is very time consuming consumption performance. How to reduce it? Suggest
- Page elements properly set high, such as in a folder img space occupied in the document flow from zero to full load, it will produce frequent redraws
- Reduce the depth of dom can reduce time-consuming parser
- Try to simplify css
- Complex animation, can make it from the elements of the document flow, use the position: absolute or position: fixed, in order to reduce the impact on the parent element
Of course, not all of the methods listed here, if you have a better suggestion, we hope to share it with
Reference Documents
https://kb.cnblogs.com/page/1...
https://www.html5rocks.com/zh...