HTML Document page redraw and re-layout

When the browser finishes downloading all page HTML tags, javascript,css, the image, it parses the file and creates two internal data structures: A DOM tree represents the page structure, and a rendering tree represents how the DOM nodes are displayed.

In the operation of the HTML page will change the structure of the page or the appearance of the page or change the structure and appearance of the page. In the process, the document's visible appearance changes very little (such as changing the color of some elements, or changing the visibility of certain elements, but this change does not affect the layout of the page), which is called "redrawing", that is, the browser has redrawn the document. If the appearance of the page has changed significantly and affects the actual layout of the document (such as the size of a <div> element has changed), then the browser will be re-layout, that is, the browser will need to recalculate and redraw all the child elements of the DIV element.

redrawing and re-layout are all very performance-intensive operations. Re-layout does not always occur when redrawing occurs, but redrawing occurs when a re-layout happens. Then which pages will be redrawn and re-laid.

As mentioned earlier, layouts and geometries need to be re-laid when they are changed. A re-layout can occur in the following situations:
(1) Adding or removing visible dom elements
(2) Element position change
(3) Element size change (due to margin, padding, border width, width, height, etc.)
(4) Changes in content, for example, changes in text or images are rendered by replacing the original page with another different size
(5) Changing the size of the browser window

redrawing or re-layout occurs when working with JavaScript on a page, although these 2 behaviors cannot be avoided, but can reduce the occurrence of triggering both behaviors. Such as:

Div.style.width= ' 200px ',

Div.style.height= ' 300px ',

Div.style.color= ' #FFF ',

Div.style.fontsize= ' 16px '

This allows the browser to calculate and draw the page 4 times,

We can put these changes into one class, such as:

. Change{width:200px;height:300px;color: #FFF; font-size:16px;}

Then set the class of div to change

div.class= ' Change '

This allows the browser to reduce the calculation and drawing of the page to one time.

Sometimes when multiple nodes are added to a page, it is possible to trigger actions that re-layout the document multiple times. Such as:

var i=0;

for (; i<10;i++) {

var newp=document.createelement (' P '),

newtext= ' new P elements---' +i;

Newp.innertext=newtext;

Document.body.appendChild (NEWP);

}

This will trigger a 10 re-layout. Using a document fragment reduces the re-layout to one time. Such as:

var i=0,pfragment=document.createdocumentfragment ();

for (; i<10;i++) {

var newp=document.createelement (' P '),

newtext= ' new P elements---' +i;

Newp.innertext=newtext;

Pfragment.appendchild (NEWP);

}

Document.body.appendChild (pfragment);

The main effect of

  JavaScript on document performance is in the operation of the DOM.