Performance comparison of Javascript createElement and innerHTML for adding page elements_javascript skills

Recently I encountered an efficiency problem with js, which was about adding new elements to the page.
Suppose we have a page as follows:

Copy the code The code is as follows:

<script> Know that you can use the following code when adding an element to a web page: <BR>//Method 1 <BR>div1.innerHTML = '<a href="">Test'; <BR>or : <BR>//Method 2 </script>

var a = document.createElement('a');
a.innertText = 'Test';
div1.appendChild(a);
Search on the Internet I came across an article discussing the efficiency of js. It probably means that method 2 is more efficient. The comparison code is as follows:




Copy code

The code is as follows: // Method 1 function init(){ var staDate = new Date(); var doc = window.document;

for (var i=0;ivar str="

test

";
container.innerHTML = str;
}
alert(new Date - staDate);
}
//Method 2
function init( ){
var staDate = new Date();
var doc = window.document;
for(var i=0;ivar oDiv = doc.createElement( "div");
var oText = doc.createTextNode("text");
oDiv.appendChild(oText);
container.appendChild(oDiv);
oDiv.style.id = " div_" i;
oDiv.style.width = "100px";
oDiv.style.height = "20px";
oDiv.style.backgroundColor = "#eee";
}
alert(new Date - staDate);
}


The page contains:

Judging from the execution effect, option 2 is about 10 times faster than option 1. Is this true? In fact, the above test code is open to question, let’s look at the loop code in method 1:



Copy the code

The code is as follows: for(var i=0;ivar str="

test

"; container.innerHTML = str; }

There are a lot of string operations, and in addition to using In addition to connecting strings, the = operator is also used. This is the problem. This method of operating strings in JavaScript seriously affects efficiency, so use the above method to test the efficiency of createEmenent and innerHTML. innerHTML is unfair. Based on this, it seems that string operations may have eaten up the performance of innerHTML, so I wrote the following test code:

<input type="button" value="测试1" onclick="test1()"> <input type="text" readonly id="t1"><input type="button" value="测试2" onclick="test2()"> <input type="text" readonly id="t2"> <input type="button" value="清空" onclick="div1.innerHTML = ''; div2.innerHTML = ''; t1.value=''; t2.value = '';"> <div id="div1"> </div> <div id="div2"></div> [Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
] After testing, it was found: 1. When there are few objects created (0-about 10), innerHTML and createElement are about the same efficiency, and the test values ​​are uncertain; 2. When there are more than 20 objects created, innerHTML is much more efficient than createElement. , the average test time is almost twice as long as createElement is innerHTML. Summary: In fact, efficiency also lies in the code written. After knowing the efficiency of the available APIs, how to write the code is also very important. Otherwise, the execution efficiency cannot be reflected, such as the codes found above from the Internet. , drawing a conclusion that is contrary to the facts.