High-Performance JavaScript (chapter III DOM programming)

1. Dom of browser

Browsers often require DOM implementations and JAVASCRIPT implementations to remain independent of each other

What does this mean for performance? Simply put, two separate sections with a functional interface can lead to performance loss. A very figurative metaphor is to think of DOM as an island, and JavaScript (ECMAScript) as another island , connected by a toll bridge

Every time ECMAScript needs to access the DOM, you need to cross the bridge and pay a " Bridge fee ". The more times you manipulate the DOM, the higher the cost. The general recommendation is to minimize the number of crossings and try to stay on ECMAScript Island. This chapter gives you a detailed answer to this question and tells you what to focus on to increase user interaction speed.

2. Dom Access and modification

The cost of accessing a DOM element is to pay a "bridge fee". The cost of modifying an element can be more expensive because it often causes the browser to recalculate the geometric changes of the page .

function Innerhtmlloop () { for (var count = 0; count < 15000; count++) {document.getElementById ( ' here '). InnerHTML + = ' a ';

The above code accesses the DOM two times, reads it once, and writes it another time.

　　Improved:

　　

 function   InnerHTMLLoop2 () { var  content = ";  for  (var  count = 0; count < 15000 ;    Count++ + = ' A '  ' here '). InnerHTML += content;}  

　The general rule of thumb is to gently touch the DOM and try to keep it within the ECMAScript range.

3. Comparison of InnerHTML and DOM methods

To create a 1000*5 table using innerHTML:

Use the DOM method to create the same table:

In fact, these two ways in the new version of the browser difference is not very big

4, the use of node cloning, General will quickly 2%~10%;

5. HTML collection:

Death sequence:

    var alldivs = document.getelementsbytagname_r (' div ');      for (var i = 0; i < alldivs.length; i++) {        document.body.appendChild (document.createelement (' div ')    }

See the following three different ways to access:

    functionToArray (coll) { for(vari = 0, a = [], len = coll.length; i < Len; i++) {A[i]=Coll[i]; }        returnA; }    varcoll = document.getelementsbytagname_r (' div '); vararr =ToArray (coll);//slower    functionloopcollection () { for(varCount = 0; Count < Coll.length; count++) {        }    }//Faster    functionLoopcopiedarray () { for(varCount = 0; Count < Arr.length; count++) {        }    }//The cache is almost as fast as Loopcopiedarray .    functionloopcachelengthcollection () {varcoll = document.getelementsbytagname_r (' div '), Len =coll.length;  for(varCount = 0; Count < Len; count++) {        }    }

6. Use local variables (caches) when accessing collection elements:

The comparison of three kinds of caching methods is as follows:

//SlowfunctionCollectionglobal () {varcoll = document.getelementsbytagname_r (' div '), Len =coll.length, name= ' ';  for(varCount = 0; Count < Len; count++) {Name= Document.getelementsbytagname_r (' div ') [Count].nodename; Name= Document.getelementsbytagname_r (' div ') [Count].nodetype; Name= Document.getelementsbytagname_r (' div ') [Count].tagname; }    returnname;};//Fasterfunctioncollectionlocal () {varcoll = document.getelementsbytagname_r (' div '), Len =coll.length, name= ' ';  for(varCount = 0; Count < Len; count++) {Name=Coll[count].nodename; Name=Coll[count].nodetype; Name=Coll[count].tagname; }    returnname;};//fastestfunctioncollectionnodeslocal () {varcoll = document.getelementsbytagname_r (' div '), Len =coll.length, name= ' ', El=NULL;  for(varCount = 0; Count < Len; count++) {El=Coll[count]; Name=El.nodename; Name=El.nodetype; Name=El.tagname; }    returnname;};

7. Traverse DOM Tree: Use the Childnode collection or use NextSibling to compare two ways:In different browsers, the running time of these two methods is basically the same:

//NextSibling Wayfunctiontestnextsibling () {varel = document.getElementById (' mydiv '), ch =El.firstchild, name= ' ';  Do{Name=Ch.nodename; }  while(ch =ch.nextsibling); returnname;};//NodeName Wayfunctiontestchildnodes () {varel = document.getElementById (' mydiv '), ch =el.childnodes, Len.=ch.length, name= ' ';  for(varCount = 0; Count < Len; count++) {Name=Ch[count].nodename; }    returnname;};

8. Only the DOM attribute (HTML tag) of the element node and the attributes representing all the nodes are as follows: Generally speaking, only the DOM of the element node is faster.

9. Selector API

var elements = Document.queryselectorall (' #menu a ');

The value of elements will contain a list of references to the elements that have the id= "menu" property. The function Queryselectorall () receives a CSS selector string parameter and returns a nodelist-- class array Object that is composed of eligible nodes. This function does not return an HTML collection, so the returned node does not render the document's " existence structure ".

This avoids the performance issues inherent in the HTML collections mentioned earlier in this chapter (and potential logical problems).

var elements = document.getElementById (' menu '). Getelementsbytagname_r (' a ');

In this case elements will be an HTML collection, so you'll also need to copy it into an array if you want the same return value type as Queryselectorall ().

For the following two segments of code, using the selector API is 2~6 times faster than the opponent

// using the selector API var errs = Document.queryselectorall (' div.warning, Div.notice '); // use the General method var errs = [],    = Document.getelementsbytagname_r (' div '),    = ';  for (var i = 0, len = divs.length; i < Len; i++) {    = divs[i].classname;     if (classname = = = ' notice ' | | classname = = ' Warning ') {        errs.push (divs[i]);}    }

10. Redrawing and re-typesetting

When the browser finishes downloading all of the page HTML tags, javascript,css, after the image, it parses the file and creates two internal data structures:

A DOM tree: represents the page structure

A render tree: Indicates how the DOM node is displayed

At least one node is stored in the render tree for each DOM tree node that needs to be displayed (the hidden DOM element does not have a corresponding node in the render tree). 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.

Once the DOM tree and 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-for example, changing the width of the border or adding text to a paragraph-a series of subsequent actions will occur-the browser needs to recalculate the geometry of the element, and the geometry properties and position of the other elements will be affected.

The browser invalidates the affected portions of the render tree, and then reconstructs the render tree. This process is called re-typesetting . When re-typesetting is complete, the browser redraws the affected part of the screen in a redraw process.

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 redraw (no reflow required ), because the layout of the element does not change.

High-Performance JavaScript (chapter III DOM programming)