CSS redrawing and rearrangement implementation examples

This article mainly and everybody introduced the CSS redraw and the rearrangement method related data, the small compilation thought quite good, now shares to everybody, hoped can help to everybody.

Browser Load Page principle

Typically, when the document is first loaded, the browser engine parses the HTML document to build the DOM tree, and then constructs a tree for rendering based on the geometry attributes of the DOM element. Each node of the render tree has properties such as size and margins, similar to a box model (because hidden elements do not need to be displayed, the render tree does not contain hidden elements in the DOM tree). When the render tree is built, the browser can place the element in the correct location, drawing the page based on the style properties of the render tree node. Because of the browser's flow layout, the calculation of the render tree is usually done by traversing only once. With the exception of table and its internal elements, it may take several calculations to determine the properties of its nodes in the render tree, which typically takes 3 times times the same time as the elements. This is one reason why we should avoid using table for layout.

Redraw

Redrawing is a browser behavior triggered by a change in the appearance of an element, such as changing vidibility, outline, background color, and so on. The browser redraws the element based on its new properties, giving the element a new look. Redrawing does not bring a re-layout, and does not necessarily accompany reflow. Browsers have a high performance cost when redrawing and re-scheduling.

Re-arrange

Rearrangement is a more obvious change that can be understood as a rendering tree that needs to be recalculated. The following are common triggers for reflow operations:

1. The Geometry property of the DOM element changes.

2. The structure of the DOM tree changes.

such as the increase or decrease of nodes, movement, etc.

Gets some properties.

When you get some properties, the browser will also trigger a reflow to get the correct value. This makes the browser's optimizations ineffective. These properties include: OffsetTop, Offsetleft, offsetwidth, offsetheight, ScrollTop, ScrollLeft, ScrollWidth, ScrollHeight, ClientTop, ClientLeft, ClientWidth, ClientHeight, getComputedStyle () (Currentstyle in IE). Therefore, the values should be cached when they are used more than once.

In addition, changing some of the elements ' styles, resizing the browser window, appearing on the scroll bar, and so on, will also trigger a reflow.

Reduce the number of reflow and reflow effects

1, the operation of changing the style properties are combined into a single operation. For example

JS:    var changep = document.getElementById (' Changep ');    Changep.style.color = ' #093;    Changep.style.background = ' #eee ';    Changep.style.height = ' 200px ';    Can be merged into: CSS:    p.changep {        background: #eee;        Color: #093;        height:200px;    } JS:    document.getElementById (' Changep '). ClassName = ' CHANGEP ';

2. The element that will need to be re-arranged multiple times, the Position property is set to absolute or fixed, so that this element is out of the document flow, its changes will not affect other elements. For example, an animated element is best set to absolute positioning.

3, in memory operation node multiple times, complete and then add to the document. For example, to get tabular data asynchronously, render to a page. Instead of looping through each row, you can make an HTML fragment of the entire table in memory and then add it to the document once.

4, because the display property is none element is not in the render tree, the operation of the hidden element does not cause the rearrangement of other elements. If you want to perform complex operations on an element, you can hide it and then display it when the operation is complete. This only triggers 2 reflow when hidden and displayed.

5. Cache to variables when you need to take those attribute values that cause the browser to Reflow