1. Page presentation process
- The browser parses the obtained HTML code into a DOM tree. Each tag in the HTML is a node in the DOM tree. The root node is the document object we commonly use. The DOM tree contains all HTML tags, including display: None hidden, and elements added dynamically with JS.
- The browser parses all styles (user-defined CSS and user agents) into style structures. In the process, it removes styles that the browser doesn’t recognize, such as IE removing styles that begin with -moz and FF removing styles that begin with _.
- Render Tree is similar to DOM Tree, but there is a big difference. The render Tree can recognize styles, and each NODE in the render Tree has its own style. Moreover, 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 they are not included in the Render Tree. Note that hidden elements will still be included in the Render tree because visibility: Hidden will affect the layout and occupy the space. According to CSS2 standards, each node in the Render Tree is called a Box (Box Dimensions), understanding the page element as a Box with padding, margins, borders, and positions.
- Once the Render Tree is built, the browser can render the page according to the Render Tree.
2. What is reflux and redraw
- 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 be refluxed at least once, the first time the page loads. 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.
- 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.
- Backflow will certainly cause redrawing, and redrawing will not necessarily cause backflow.
Repaint is the process by which the browser redraws an element when it knows it has been created without affecting typography. For example, we change the color of the element, add an underscore, etc.
Reflow, the browser knows that the element has made a style change that affects the layout of the document tree, and relayouts all dom nodes that are affected
3. Scenario of backflow
Backflow is required when the page layout and geometry properties change.
- Add or remove visible DOM elements
- Element position changes;
- Element size changes — margins, padding, borders, width, and height
- Content changes – such as changes in text or image size resulting in changes in the width and height of the calculated values;
- Page render initialization;
- The browser window size changes — when the resize event occurs;
var s = document.body.style;
s.padding = "2px"; // Backflow + redraw s.order ="1px solid red"; // Redraw s.color = again"blue"; // Redraw s.buckgroundcolor = again"#ccc"; // Redraw s.font size = again"14px"; / / return again + redrawing / / add a node, reflux + redraw the document again. The body. The appendChild (document. CreateTextNode ('abc! '));
Copy the code4. Effects of reflux and repainting
Backflow is more expensive than drawing, and the cost of backflow depends on how many nodes of the Render Tree need to be rebuilt. If you operate on the body directly, such as inserting an element at the front of the body, causing the entire Render Tree to backflow, the cost will be higher. But if you insert an element after the body, it does not affect the backflow of the previous element.
5. How does the browser handle it
If every JS operation has to backflow and redraw, browsers may not be able to handle it.
The browser maintains a queue and places all operations that cause backflow and redraw in this queue. When the number of operations in the queue reaches a certain number of times or at a certain interval, the browser flushes the queue and performs a batch. This will turn multiple backflow and redraw into a single backflow redraw.
There are browser optimizations, but sometimes we write code that forces the browser to flush the queue ahead of time, so browser optimizations don’t work. When you request some style information from the browser, you flush the browser queue:
- offsetTop, offsetLeft, offsetWidth, offsetHeight
- scrollTop/Left/Width/Height
- clientTop/Left/Width/Height
- width,height
- GetComputedStyle (), or currentStyle of IE, is requested
When you request some of the above attributes, the browser needs to flush the queue in order to give you the most accurate values, because there may be operations in the queue that affect those values. Even if you get an element’s layout and style information unrelated to the most recent or changed layout information, the browser forces the render queue to refresh. The engine rerenders to ensure that the values are captured in real time.
6. How to reduce backflow and redraw
Reducing backflow and redrawing is a matter of reducing render Tree operations (incorporating multiple DOM and style changes) and reducing requests for style information to take advantage of browser optimization strategies.
- Computations to Render Tree are usually done once, except for tables and their internal elements, which may require multiple computations and usually take three times as long as equivalent elements, which is one of the reasons to avoid table layouts.
- Change the class at the very end of the DOM tree whenever possible. Avoid setting multiple inline styles. Apply the animation to an element whose position attribute is absolute or fixed. Avoid USING CSS expressions (such as calc()).
- 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. You can also set display: None to the element and display it after the operation is complete. Because DOM operations on elements with the display attribute none do not cause backflow and redraw. 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.
6. Understand display: None and visibility:hidden again
- Both can hide nodes on the page.
- Display: None Hidden elements take up no space. Its width, height and other attributes will be “lost”
- Visibility: The hidden element space will still exist. It still has height, width, and other attribute values
- From a performance point of view, this is the aspect of reflux and redrawing.
- Display: None triggers reflow
- Visibility: Hidden will only trigger repaint because no position changes have been detected
Both visibility: Hidden in optimization will be better because we will not change the display hierarchy defined in the document because of it.
- Effects on child elements
- Display: None Once display: None is applied to the parent node element, the parent node and its descendants are not visible, and the display value cannot be displayed no matter how their descendants are set.
- Once the parent node element has applied visibility:hidden, its descendants will also be completely invisible. However, there is a hidden “failure”. When a descendant element has applied visibility:visible, the descendant element will be visible again.
Wireless performance optimization: Composite
The presentation of a Web page can simply be thought of as going through the following steps.
Performance optimization
Ascension to the composite layer has the following benefits in brief:
- The bitmap of the composite layer will be synthesized by the GPU faster than the CPU
- When repaint is required, only repaint itself is required and no other layers are affected
- Layout and Paint are not triggered for Transform and opacity effects
1. Elements that enhance the animation
The advantage of the composition layer is that it does not affect the drawing of other elements, so in order to reduce the influence of animation elements on other elements and thus reduce the paint, we need to promote the elements in the animation effect to the composition layer.
The best way to improve the composition layer is to use the WILL-change property of CSS. From the previous section, it can be seen that setting will-change to opacity, transform, top, left, bottom and right can promote an element to the composition layer.
#target {will-change: transform; For those browsers that do not currently support will-change, a 3D Transform property is commonly used to enforce promotion to the composition layer#target {
transform: translateZ(0);
}
Copy the codeBe careful not to create too many render layers. Because each new rendering layer created means new memory allocation and more complex layer management.
If you’ve put an element into a new compositing layer, you can use Timeline to see if doing so really improves rendering performance. Do not blindly improve the composite layer, be sure to analyze its actual performance.
2. Animate using transform or opacity
In fact, from the perspective of performance, the optimal rendering pipeline is no layout and drawing, just need to merge the composition layer:
To achieve this, you need to use only those properties that only trigger the Composite. Currently, only two properties satisfy this condition: transforms and opacity.
3. Reduce the drawing area
- Avoid drawing areas that do not need to be redrawn, such as a fixed navigation header fixed at the top of the page. When repainted in a certain area of the page content, the entire screen including the header fixed at the top of the page will also be redrawn.
- For fixed areas, it is expected that they will not be redrawn, so they can be raised as separate composite layers using the previous method.
4. Manage the compositing layer properly: Creating a new compositing layer is not free, it consumes extra memory and management resources. In fact, on devices with limited memory resources, the performance gains from the composition layer may not be matched by the negative impact of excessive composition layer overhead on page performance.
Most people love using translateZ(0) for so-called hardware acceleration to improve performance, but there is no such thing as a “silver bullet” for performance optimization. TranslateZ (0) is not, and neither are the optimization suggestions listed in this article. Regardless of the specific analysis of the page, any performance optimization is untenable, blindly using some optimization measures, the results may be counterproductive. Therefore, to analyze the actual performance of the page, and constantly improve the test, is the right way to optimize.