Recently encountered JS efficiency problem, is about the new elements in the page problem.
Suppose we have the following page:
Copy Code code as follows:
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id= "Div1" ></div>
</BODY>
<script>
Script Location
</script>
</HTML>
Now that we're going to add objects to DIV1, we all know that when you add an element to a Web page, you can use the following code:
Method 1
div1.innerhtml = ' <a href= ' "> Test </a>";
Or:
Method 2
var a = document.createelement (' a ');
A.innerttext = ' Test ';
Div1.appendchild (a);
Search on the Internet to discuss the efficiency of JS article, the general meaning is that method 2 efficiency, the comparison code is as follows:
Copy Code code as follows:
Method 1
function init () {
var stadate = new Date ();
var doc = window.document;
for (Var i=0;i<100;i++) {
var str= "<div id= ' div_ '" +i+ "' style= ' width:100px; Height:20px;background-color: #eee ' >test</div> ';
container.innerhtml + + str;
}
Alert (new date-stadate);
}
Method 2
function init () {
var stadate = new Date ();
var doc = window.document;
for (Var i=0;i<100;i++) {
var 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);
}
On its pages are:
<div id= "Container" ></div>
<input type= "button" value= "Start" onclick= "Init ();"/>
From the implementation of the effect of the plan 2 is 10 times times faster than 1, in the end this is not true? In fact, the above test code is open to discussion, and look at the loop code in its Method 1:
Copy Code code as follows:
for (Var i=0;i<100;i++) {
var str= "<div id= ' div_ '" +i+ "' style= ' width:100px; Height:20px;background-color: #eee ' >test</div> ';
container.innerhtml + + str;
}
There are a lot of string operations, and besides using the + number to connect the string, the + + operator is used, which is the problem, and in JavaScript this manipulation of strings is seriously inefficient, So using the above method to test the efficiency of createemenent and innerHTML is unfair to innerHTML, it seems likely that the string operation ate the performance of innerHTML and wrote the following test code:
<HTML> <HEAD> </HEAD> <BODY> <input type= "button" value= "Test 1" onclick= "test1 ()"/><in Put Type=text readonly id=t1> <input type= "button" value= "Test 2" onclick= "Test2 ()"/><input type=text readonly id=t2> <input type= "button" value= "Empty" onclick= "div1.innerhtml ="; div2.innerhtml = '; T1.value= '; T2.value = '; "/> <div id=" Div1 "></div> <div id=" Div2 "></div> </BODY> <script> function test1 () {var d = new Date (); var buf = new Array (); for (var n = 0; n < 1000 n + +) {buf.push (' test '); Buf.push (n); Buf.push ("); } div1.innerhtml = Buf.join ('); T1.value = ' time consuming: ' + (new Date ()-D); function Test2 () {var d = new Date (); for (var n = 0; n < 1000 n + +) {var e = document.createelement (' a '); E.href = '; E.innertext = ' Test ' + N; Div2.appendchild (e); } T2.value = ' time consuming: ' + (new Date ()-D); } </script> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
After testing found:
1, in the creation of fewer objects (0-about 10), innerHTML and createelement efficiency is similar, the test value youhu uncertain;
2, in the creation of objects more than 20 o'clock, innerhtml than createelement efficiency is much higher, the average test almost createelement time is innerhtml twice times.
Summary: In fact, efficiency is also written in the code, in the knowledge of the efficiency of available APIs, how to write code is also very important, otherwise the implementation of the efficiency can not be reflected, as above from the Internet found that the code, to come to a contrary to the facts of the conclusion.
