High-performance JavaScript reading notes (three. DOM Programming 2)

Redraw and re-typesetting

After the browser has downloaded all the HTML tags, javascript,css, and images, it parses the file and creates two internal data structures

Dom tree represents page structure
The render tree represents how the DOM nodes are displayed

Each DOM tree = node in the render tree that needs to be displayed holds at least one node (hidden DOM element does not have a corresponding node in the selected eucalyptus)
The nodes on the render tree are called "boxes" or "boxes" that conform to the definition of a CSS model and treat page elements as a box with padding, margins, borders, and positions. One
Once the DOM tree and the render tree are constructed, the browser can display (draw) The elements on the page.

When DOM changes affect the geometric properties (width and height) of the element--changing the width of the border to add text to the paragraph, a series of subsequent actions occur.
The browser needs to recalculate the geometry properties of the element, and the geometry properties and position of the other elements will change to receive the effect. The browser causes the rendering tree to be
The affected part fails, and then reconstructs the render tree. This process is called re-typesetting. When the re-typesetting is complete. The browser redraws the screen in a redraw process
The affected part.

Not all DOM changes affect the geometry properties. For example, changing the background color of an element does not affect its width or height. In this case, you only need to re-
(no reflow required), the layout of the elements has not changed.

The situation in which the re-typesetting occurred:

Add or remove a visible DOM element
Change the position of the element
Changes in the dimensions of the element (margin, padding, border width, width, height, etc.)
Content changes the text changes or the picture is replaced by another different size
The initial page rendering
browser window changes size

Depending on the nature of the change, a recalculation is required on the render tree or a large or small part. Some changes result in the re-typesetting of the entire page. For example, when a scroll bar is out
Is.

Because the amount of computation is related to each re-typesetting, most browsers optimize the re-typesetting process by degrading and batch display, however, you might force the queue to refresh
and requires that all planned changes be applied immediately. Getting the layout information will cause the queue action to be refreshed.
OffsetTop. Offsetleft...offsetwidth...offsetheight
ScrollTop ....
ClientTop .....
getComputedStyle () Currentstyle in IE//Get compatibility with non-inline styles
Document.body.currentStyle getComputedStyle (document.body)

The layout information is returned by these properties and methods to the latest data, so the browser has to run the items to be changed in the render queue and re-typeset to return the correct
Value.

In the process of changing styles, it is best not to use the attributes listed earlier. Any one access will flush the render queue. Even if you are getting those recent
Layout information that has not changed or has nothing to do with the latest changes.

Minimize redraw and re-layout

El.style.borderleft= "1px";
El.style.borderright= "2px";
El.style.borderpadding= "5px";

The three stylistic attributes changed here, each of which affects the geometric properties of the element. It causes the browser to re-typeset three times.
Most modern browsers optimize this situation with only one re-typesetting, but the old-fashioned browser is inefficient.

Ways to change style at once:
Csstext Properties:
El.style.csstext= "BORDER-LEFT:1PX; border-right:2px; padding:5px; "
Csstext will overwrite the previous CSS style,
el.style.csstext+= "BORDER-LEFT:1PX;"

Modifying the class name of a CSS
El.classname= "Active"

Bulk Modify Dom

Reduce redraw and reflow times
1. Remove the element from the document
2. Apply multiple changes to it

High-performance JavaScript reading notes (three. DOM Programming 2)