What happens when the HTML loads
When the page loads, the browser parses the retrieved HTML code into a DOM tree, which contains all HTML tags, including display: None hidden, and elements dynamically added with JS. The browser parses all the styles (user-defined CSS and user agent) into a style structure called DOM Tree and the combination of style structures to construct the Render Tree. The render Tree is similar to the DOM Tree, but very different, because the Render Tree can recognize the style. Each NODE in the Render Tree has its own style, and the Render Tree does not contain hidden nodes (such as display: None and head nodes), because these nodes are not used for rendering and do not affect rendering. So it won’t be included in the Render Tree. My own simple understanding is that after combining the DOM Tree with the CSS we wrote, we render the Render Tree.
What is reflux
When part (or all) of the Render Tree needs to be rebuilt due to changes in element size, layout, hiding, etc. This is called reflow. Each page needs to backflow at least once, even when the page is first loaded, which is bound to happen because the Render Tree is being built. On backflow, the browser invalidates the affected portion of the render tree and reconstructs that portion of the render tree. When backflow is complete, the browser redraws the affected portion of the render tree onto the screen, a process called redraw.
What is redraw
When some elements in the Render Tree need to update their attributes, these attributes only affect the appearance and style of the elements, not the layout, such as background-color. It’s called redrawing.
The difference between:
The difference is significant: backflow will inevitably cause repainting, and repainting will not necessarily cause backflow. For example, redrawing occurs when only the color changes and does not cause backflow. Backflow occurs when the layout and geometry of the page changes: adding or removing visible DOM elements, element positions change, element dimensions change – margins, padding, borders, width, and height – and content changes
Extension:
Browser help
So we know that backflow is more expensive than drawing, and the cost of backflow is related to how many nodes of the Render Tree need to be rebuilt. Because of these mechanisms, the browser will help us optimize these operations. The browser will maintain a queue and put all operations that cause backflow and redraw into this queue. When the number of operations in the queue reaches a certain number or a certain interval, the browser flushes the queue and performs a batch. This will turn multiple backflow and redraw into a single backflow redraw.
Self optimization
But it’s better to rely on the browser, so we can change the way we write things to reduce backflow and redraw for example, when we change the style, instead of changing each of them, we change the className and we use cssText but there’s one thing that we need to be aware of, which is that we get rid of the cssText, For example, the original style had ‘display:none; ‘, then after executing the JS above, the display will be deleted. To solve this problem, you can use the cssText accumulation method, but IE does not support the accumulation, add a semicolon before the solution. CloneNode (true or false) can be used to create an appened for a div with three child p elements. If you want to create a div and add p elements three times, you can use cloneNode(true or false) to create an appened. There are a lot of other ways that I won’t mention
If you feel helpful to you! Please help me order a like 😍😍😍