"Go" console.time a simple analysis of the performance of JavaScript dynamically adding DOM nodes

This Article code convention

• 1 El: Refers to a DOM node that increases the direct point
• 2 Totalnum: 100000 (the larger the value, the greater the difference) refers to the DOM node created by the loop
• 3 for (Var i=0;i<totalnum;i++) {}: We'll use for to express it, shorthand code

If you are asked to dynamically add DOM nodes with JavaScript, what kinds of ideas do you have?

1. Using innerHTML and string concatenation

Console.time ("time1"); var str = "";  for  + = "<div>123<div>" = str;console.timeend ("time1");

2. Using innerHTML and Arrays

Console.time ("time2"); var arr = [];  for {Arr.push ("<div>123<div>"= Arr.join (""); Console.timeend ("time2");

3. Using the DOM API

Console.time ("Time3"); var str = "";  for {var div = document.createelement ("div"= "123"; El.appendchild (div);} Console.timeend ("Time3");

Results

Here it is necessary to know the role of the console.time command, see link console.time (label). Let me briefly introduce you to a parameter in the Console.time function, which is a tag, and when Chrome runs here it starts to tick, when does it end, and this is about the other function console.timeend, the parameter is just that tag. This way we know how long the middle piece of JavaScript code has been running, and remember that it's in milliseconds.

Well, now we're guessing which code runs the shortest time?

Not suspense, the length of time gradually increased is: time2<time3<time1 (I just test on chrome, may not be the same in other browsers)

Summary

Why does the above situation occur?

First of all we need to know that we use chrome is the WebKit kernel, they have optimized the operation of the DOM node, so the DOM API and innerHTML Two is not very different in performance (quoted in "High-performance JavaScript")

The second is that since the DOM API and innerHTML performance is not much different, why time3<time1 it? This is a performance issue with string connections.

For the above example str + = "<div>123</div>" that JS parser how to parse it?

1 Create a new temporary string

2 assigning str and the following string concatenation to a new temporary string

3 destroying the original string and assigning it to STR

the efficiency of such a child is low.

Three and the first array as the original method why is the fastest? This is because the native part of JavaScript is in the browser when you write the code, which is written in the underlying language, such as C + +, which means that these methods will be compiled into machine code ("High Performance JavaScript")