High-performance JavaScript learning notes-Daily

------------------7-20 More------------------

Recently in the "high-performance JavaScript" book, Inside, there are many things to improve the performance of JS Book, is looking at the process, write down the practice and reasons for later study reference:

1. Place frequently Used object members, array items, and extraterritorial variables in local variables

Cause: The location of the data store has an important impact on the overall performance of the geodetic code, and direct variables and local variables are accessed faster than arrays and object members. Because the local variable is in the first object of the scope chain, the global variable is in the last loop of the scope chain. The deeper the variable is located in the scope chain, the longer it will be accessed.

1 var doc = document; 2 var db = doc.body; 3 var odiv = Doc.getelementbyid (' Div1 ');

2. Avoid using the WITH expression because he has changed the scope chain of the run-time context.

3, the same with, also pay attention to the use of try-catch, because the catch will also change the scope of the runtime context chain.

4. Nested member variables can cause significant performance impact and are used sparingly.

5, Dom operation quantization problem:

1     //To update the page in the bad, the problem is that each loop accesses the DOM element two times, one time to read document.getElementById (' here '). innerHTML content, one time is to modify it. 2     functionChangedom () {3          for(vari=0; I < 15000; i++){4document.getElementById (' here '). InnerHTML + = ' a ';5         }6 7     }    8     //change the method, use local variables to save the change amount, and modify it at the end of the cycle .9     functionChangedom () {Ten         varContent = '; One          for(vari=0; I < 15000; i++){ AContent + = ' a '; -         } -document.getElementById (' here '). InnerHTML + =content; the          -}

6, cloning the existing DOM elements, namely Element.clonenode (), compared to the new node, namely Element.createelement (), will be faster, but the performance is not very high.

7. Iterate over an array of HTML collections that are significantly faster than the same size and content

8, for loop, the length of an element collection of HTML is not recommended directly as a loop termination condition, it is better to assign the length of the set to a variable, and then use the variable as the loop termination condition;

Cause: When each iteration process accesses the length of the collection, it causes the collector to update, resulting in significant performance loss on all browsers.

9, need to consider the actual situation of optimization, according to 7, the elements of the collection can be passed through for the bad assignment to the array, the array of access to the array faster than the collection. But be aware that the cost of replication is worth it.

 1  function   ToArray (collection) { 2  var  arr =  [];  3  var  clen = Collection.length;  4   var  i= 0; i < Clen; I++ 5  arr[i] = Collection[i];  6   7
       8 } 

10, get the DOM node, using nextsibling mode and ChildNodes way, in different browsers, the time of the two methods is basically equal. But in IE, nextsibling than childnodes Good, IE6 under, nextsibling than rivals 16 times times faster, in IE7, 105 times times faster. Therefore, in the old IE in the performance of the harsh conditions of use, with nextsibling better.

11, Queryselectorall () can be federated query, that is Queryselectorall (' div. warning,div. Notice '), in the major browser support is also very good, but also can filter a lot of non-element nodes;

PS: This site is: http://caniuse.com/, you can check the HTML, CSS elements in the compatibility of the major browsers, a very useful site!

12, redraw and re-typesetting;

Redraw: Does not need to change the length and width of the element, does not affect the DOM geometry properties;

Re-layout: Affects geometric properties, requires recalculation of the element's geometry properties, and the geometry properties of other elements may also be affected. The browser redraws the affected parts of the screen during the re-typesetting process.

High-performance JavaScript learning notes-Daily