Browsers parse HTML to DOM and CSS to CSSOM. DOM and CSSOM are combined to produce a Render Tree.
With RenderTree, we know the style of all the nodes, calculate their size and position on the page, and finally draw the nodes on the page.
Because browsers use streaming layouts, calculations of Render Tree are usually done once, except for tables and their internal elements, which can be evaluated multiple times and usually take three times as long as equivalent elements, which is one of the reasons to avoid table layouts.
2. Redrawn
Redraw a node whose geometry or style changes without affecting the layout, such as outline, visibility, color, background-color, etc. Redraw is expensive because the browser must verify the visibility of other node elements in the DOM tree.
3. Return
Backflow is when layout or geometry properties need to be changed. Backflow is a key factor affecting browser performance because it involves updating the layout of part of the page (or the entire page). The backflow of an element can result in subsequent backflow of all its child elements, as well as subsequent nodes in the DOM and ancestor node elements.
<body> <div class="error"> <h4> My component </h4> <p><strong> Error: </strong> Error description... < / p > < h5 > error-correction < / h5 > < ol > < li > the first step < / li > < li > step 2 < / li > < / ol > < / div > < / body >Copy the code
In the HTML snippet above, for the paragraph (
Backflow will cause strong backflow because it is a child node. This also results in ancestor backflow (div.error and body-depending on the browser). In addition,
and
There is also a simple backflow because it is in the DOM after the backflow element. Most of the backflow will cause the page to be re-rendered.
Backflow must occur redraw, redraw does not necessarily cause backflow.
4. The browser optimization of most modern browsers are batch update layout through the queue mechanism, the browser will put the modification operations in the queue, at least one browser refresh (16.6 ms) will empty the queue, but when you get the layout information, the queue may affect the properties or methods return value of the operation, if not, The browser also forces the queue to empty, triggering backflow and redraw to ensure that the correct value is returned.
These include the following attributes or methods:
OffsetTop, offsetLeft, offsetWidth, offsetHeight
ScrollTop, scrollLeft, scrollWidth, scrollHeight
ClientTop, clientLeft, clientWidth, clientHeight
Width, height,
getComputedStyle()
getBoundingClientRect()
Therefore, we should avoid frequent use of the above attributes, which force the render to refresh the queue. 5. Reduce redrawing and reflow
1.CSS
Use transform instead of top
Use visibility instead of display: None, because the former will only cause redraw and the latter will cause backflow (changing the layout)
Avoid using a table layout because a small change can cause the entire table to be rearranged.
If possible, change the class at the very end of the DOM tree. Backflow is inevitable, but its impact can be reduced. Changing the class as far down the DOM tree as possible limits the scope of backflow, affecting as few nodes as possible.
Avoid multiple inline styles and CSS selectors match from right to left to avoid too many nodes.
<div>
<a> <span></span> </a>
</div>
<style>
span {
color: red;
}
div > a > span {
color: red;
}
</style>
Copy the code
For the first style, the browser just needs to find all the SPAN tags on the page and set the color, but for the second style, the browser needs to find all the SPAN tags, then find the A tag on the SPAN tag, and finally find the div tag. Then color span tags that match this condition, and the recursive process becomes complicated. So we should avoid writing too specific CSS selectors as much as possible, and add as few meaningless tags to THE HTML as possible to keep the hierarchy flat.
Apply the animation effect to elements with position set to Absolute or fixed to avoid affecting the layout of other elements. This is just a redraw, not a backflow. Also, control the animation speed by using requestAnimationFrame. See requestAnimationFrame for details.
Avoid using CSS expressions, which may cause backflow.
If a node that is frequently redrawn or reflow is set as a layer, the layer can prevent the rendering behavior of this node from affecting other nodes, such as will-change, video, iframe, etc., and the browser will automatically turn this node into a layer.
CSS3 hardware acceleration (GPU acceleration) : CSS3 hardware acceleration enables transform, opacity, and filters to be redrawn without causing backflow. Other properties of animations, such as background-color, will still cause backflow redraw, but it can still improve the performance of those animations.
2.JavaScript
To avoid manipulating styles too often, it is best to override the style property once, or define the style list as class and change the class property once.
To avoid frequent DOM manipulation, create a documentFragment, apply all DOM manipulation to it, and finally add it to the document.
Avoid frequently reading properties that cause backflow/redraw, and if you do need to use them more than once, cache them in a variable.
Use absolute positioning on elements with complex animations to keep them out of the document stream, which would otherwise cause frequent backflow of parent elements and subsequent elements.
Read more:
Detailed page reflux and redraw – nuggets
Do you really understand redraw and reflux?
Send you a browser repaint reflow with optimizations
❤️ watch two little things
If you find this article inspiring, I’d like you to do me two small favors:
Share this article with your friends/communication group, let more people see it, progress together, grow together!
Pay attention to the public number “IT square head brother alliance”, the public number background reply “resources” free of charge to get my carefully organized front-end advanced resources tutorial
www.javascriptC.com is a platform dedicated to helping developers change the world with code. You can find the top content in the technology world here every day
