Examples of css redrawing and rearrangement

This article mainly introduces to you the relevant information about CSS redrawing and reflowing methods. The editor thinks it is quite good, so I will share it with you now, hoping to help everyone.

Principle of browser loading page

Usually when the document is first loaded, the browser engine will parse the HTML document to build a DOM tree, and then build it based on the geometric attributes of the DOM element A tree for rendering. Each node of the rendering tree has attributes such as size and margin, similar to the 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,

JS:
    var changep = document.getElementById(‘changep’);
    changep.style.color = ‘#093′;
    changep.style.background = ‘#eee';
    changep.style.height = ‘200px';
    可以合并为：
CSS:
    p.changep {
        background: #eee;
        color: #093;
        height: 200px;
    }
JS:
    document.getElementById(‘changep’).className = ‘changep';

2. Set the position attribute of an element that needs to be rearranged multiple times to absolute or fixed, so that the element is out of the document flow and its changes will not change. will 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

Related recommendations:

Page reflow Optimization methods for drawing and reflow

High-performance WEB development page rendering, redrawing, and reflow.

js generates thumbnails and then uploads them and uses canvas to redraw_javascript skills

The above is the detailed content of Examples of css redrawing and rearrangement. For more information, please follow other related articles on the PHP Chinese website!