How to use redraw and reflow

This time I will show you how to use redraw and reflow, and what are the precautions for using redraw and reflow. The following is a practical case, let's take a look.

Principle of browser loading page

Usually when the document is loaded for the first time, the browser engine will parse the

HTML document to build a DOM tree, and then based on The geometric properties of DOM elements build a tree for rendering. Each node of the rendering tree has attributes such as size and margin, similar to Box Model (Since hidden elements do not need to be displayed, the rendering tree does not contain hidden elements in the DOM tree). When the rendering tree is constructed, the browser can place the elements in the correct position, and then draw the page based on the style attributes of the rendering tree nodes. Due to the browser's flow layout, the calculation of the rendering tree usually only needs to be traversed once. With the exception of table and its internal elements, it may require multiple calculations to determine the attributes of its nodes in the rendering tree, which usually takes 3 times the time of equivalent elements. This is one reason why we should avoid using tables for layout.

Redraw

Redraw is a browser behavior triggered by a change in the appearance of an element, such as changing attributes such as visibility, outline, and background color. The browser will redraw the element based on its new attributes, giving the element a new appearance. Redrawing does not bring about re-layout and is not necessarily accompanied by reflow. Browsers pay a high performance price when redrawing and reflowing.

Rearrangement

Rearrangement is a more obvious change, which can be understood as the rendering tree needs to be recalculated. The following are common operations that trigger reordering:

1. Geometry attribute changes of DOM elements.

2. Structural changes of the DOM tree.

For example, the addition, subtraction, movement of nodes, etc.

Get some attributes.

When getting some attributes, the browser will also trigger reflow to get the correct value. This renders the browser's optimization ineffective. These properties include: offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle() (currentStyle in IE). Therefore, these values ​​should be cached when used multiple times.

In addition, changing some styles of elements, resizing the browser window, appearing scroll bars, etc. will also trigger reflow.

Reduce the number of rearrangements and the scope of impact of rearrangements

1. Combine multiple operations of changing style attributes into one operation. For example,

2. Set the position attribute of an element that needs to be rearranged multiple times to absolute or fixed, so that this element is out of the document flow and its changes will not affect other elements. For example, elements with animated effects are best set to

absolute positioning.

3. Operate the node multiple times in the memory, and then add it to the document after completion. For example, you want to obtain table data asynchronously and render it to the page. You can first obtain the data and then build the html fragment of the entire table in memory, and then add it to the document at once, instead of adding each row in a loop.

4. Since elements with a display attribute of none are not in the rendering tree, operations on hidden elements will not cause the rearrangement of other elements. If you want to perform complex operations on an element, you can hide it first and then display it after the operation is completed. This only triggers 2 reflows when hiding and showing.

5. When you need to frequently retrieve attribute values ​​that cause browser reflow, you need to cache them in variables

I believe you have mastered the method after reading the case in this article. Please pay attention to php for more exciting information. Other related articles on the Chinese website!

Recommended reading:

S5 allows layered screen adaptation

##h5 implements multiple image preview uploads and clickable drag controls

The above is the detailed content of How to use redraw and reflow. For more information, please follow other related articles on the PHP Chinese website!