innerHTML and appendchild speed test, which is fast?

Previously in the group has discussed with the hope of a innerhtml and appendchild who faster things, then did a test, the result is, in IE, innerhtml than appendchild faster, Firefox and Chrome,safari, AppendChild is faster than innerHTML.

The code at the time, is like this.

Insert 1000 Li into the body,

 
  
  

  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
var str= ""; for (Var i=0;i<1000;i++) {str+= "<li></li>"} document.body.innerhtml=str;
 
    
 
   
 
  
  

AppendChild

 
  
  

  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
for (Var i=0;i<1000;i++) {var li=document.createelement ("Li"); Document.body.appendChild (LI);}
 
    
 
   
 
  
  

But it's been 2 years, now browsers, not the browser of the year, the string addition is faster than the array join, so I always have an idea to test the modern browser.

My browser environment is the chrome 23,firefox 17,IE9

In my practice, create 1000 P tags in the body

 
  
  

  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
for (Var i=0;i<1000;i++) {
Document.body.appendChild (Document.createelement ("P")); }
var p=document.getelementsbytagname ("P");
 
    
 
   
 
  
  

Test A

The Test innerHTML is

 
  
  

  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
for (Var i=0;i<1000;i++) {
Document.body.appendChild (Document.createelement ("P")); }
var p=document.getelementsbytagname ("P");
var d=new Date (); for (Var k=0;k<1000;k++) {p[k].innerhtml= "1";}
Console.log (New Date ()-D);
 
    
 
   
 
  
  

The corresponding appendchild approach is

 
  
  

  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
for (Var i=0;i<1000;i++) {
Document.body.appendChild (Document.createelement ("P")); }
var p=document.getelementsbytagname ("P");
var d=new Date (); for (Var k=0;k<1000;k++) {
P[k].appendchild (document.createTextNode ("1"));
}
Console.log (New Date ()-D);
 
    
 
   
 
  
  

All right, start the test!

Browser	Chrome	Firefox	IE
InnerHTML	17-20	59-70	98-116
AppendChild	13-15	50-56	105-109

from the test results, if you insert a character "1" into these 1000 p, then obviously in Chrome, appendchild is much faster than innerHTML, Firefox is also faster, IE is quite

Test Two

The Test innerHTML is

 
  
  

  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
for (Var i=0;i<1000;i++) {
Document.body.appendChild (Document.createelement ("P")); }
var p=document.getelementsbytagname ("P");
var d=new Date (); for (Var k=0;k<1000;k++) {
P[k].innerhtml= ";" }
Console.log (New Date ()-D);
 
    
 
   
 
  
  

The corresponding appendchild approach is

 
  
  

  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
for (Var i=0;i<1000;i++) {
Document.body.appendChild (Document.createelement ("P")); }
var p=document.getelementsbytagname ("P");
var d=new Date (); for (Var k=0;k<1000;k++) {
var span=document.createelement ("span");
Span.appendchild (document.createTextNode ("13"));
P[k].appendchild (span); }
Console.log (New Date ()-D);
 
    
 
   
 
  
  

All right, start the test!

Browser	Chrome	Firefox	IE
InnerHTML	28-35	73-81	115-135
AppendChild	19-24	67-74	201-231

From the test results, if the 1000 p to insert a "span", Chrome, appendchild still much faster than innerHTML, Firefox will be faster, ie in the appendchild than innerhtml much slower.

To summarize, in modern browsers, IE9 DOM operations are still slower than innerhtml and require special treatment.