High-performance JavaScriptDOM programming (1) _ javascript skills

This article mainly introduces high-performance JavaScriptDOM programming and how to improve program efficiency. if you want to know more about it, you can refer to it. DOM is an application interface used to operate XML and HTML documents, it is expensive to use scripts to perform DOM operations. There is an apt analogy. we think of DOM and JavaScript (ECMScript here) as an island, and they are connected by a toll bridge. ECMAScript needs to access DOM through this bridge every time, and pay the "Bridge fee", the more times the DOM is accessed, the higher the cost. Therefore, we recommend that you minimize the number of bridge times and try to stay on ECMAScript Island. We cannot use DOM interfaces. how can we improve program efficiency?

1. DOM access and modification
There is a price to access DOM elements ("Bridge fees" you know), and modifying elements is even more expensive because it will cause the browser to recalculate the geometric changes of the page (shuffling and re-painting ).

Of course, the worst case is to access or modify elements in a loop. See the following two sections of code:

var times = 15000;// code1console.time(1);for(var i = 0; i < times; i++) { document.getElementById('myDiv1').innerHTML += 'a';}console.timeEnd(1);// code2console.time(2);var str = '';for(var i = 0; i < times; i++) { str += 'a';}document.getElementById('myDiv2').innerHTML = str;console.timeEnd(2);

The first running time is times that of the second running! (Chrome version 44.0.2403.130 m)

1: 2846.700ms2: 1.046ms

The problem with the first code is that this element is accessed twice during each iteration: the value of innerHTML is read at one time, and the element is rewritten at another time, that is, every cycle is crossing the bridge (shuffling and re-painting will be explained in the next article )! The results fully indicate that the more times the DOM is accessed, the slower the code runs. Therefore, reduce the number of DOM accesses as much as possible, and try to stay in ECMAScript for processing.

2. HTML collection & DOM traversal
Another energy-consuming point of DOM operation is to traverse the DOM. generally, we collect an HTML set, such as getElementsByTagName () or document. links. The collection result is a collection similar to an array. it exists in a "real-time state" in real time, which means that it will be automatically updated when the underlying document object is updated. What should I do? For example:

 
 
 
  
Apple
 
  
Orange
 
  
Banana