In code optimization, we often talk about page backflow and page redraw, so what do they mean and how do they cause it? Why do we want to prevent page backflow as much as possible? Take a look at today’s article!

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.

backflow

Rerender (or rebuild render) when part (or all) of the render Tree changes due to 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.

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

Backflow will certainly cause redrawing, and redrawing will not necessarily cause backflow. For example, when only the color changes, only repainting will occur and no backflow will occur

Backflow is required when the page layout and geometry properties change. For example: add or remove visible DOM elements, element position changes, element size (margin, padding, border), width, and height changes, and content changes

extension

To optimize the

We can change some of the notation to reduce backflow and redraw. For example, if you change the style, instead of changing the style of each of them, you just change the className and you use the cssText. But there is a problem that you will remove the cssText. For example, the original style has ‘display: None; ‘, then after executing the above JS, display is 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. In addition, if you want to add a div with three child elements p, you can add div and p three times, which will trigger a lot of backflow and redraw. CloneNode (true or false) can be used to avoid this. There are many methods, interested partners in the message board to discuss it

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event