Parsing js native methods to create table efficiency test_javascript skills

There are three types of algorithms mentioned in this article for table creation, namely, direct dom operations, createDocumentFragment, and Native table operation methods of js. Let's take a look at these three algorithms and their performance in various browsers.
First, operate the dom directly.

The Code is as follows:

Http://www.w3.org/TR/html4/loose.dtd>



New Web Project


Script
Microtime = function (get_as_float ){
Var now = new Date (). getTime ()/1000;
Var s = parseInt (now, 10 );
Return (get_as_float )? Now: (Math. round (now-s) * 1000)/1000) + ''+ s;
}
Var m1 = microtime (true );
Var table = document. createElement ("table ");
Table. border = 1;
Var tbody = document. createElement ("tbody ");
For (var I = 0; I <1000; I ++ ){
Var tr = document. createElement ("tr ");
For (var j = 0; j <5; j ++ ){
Var td = document. createElement ("td ");
Td. appendChild (document. createTextNode ("cell" + I + "," + j ));
Tr. appendChild (td );
}
Tbody. appendChild (tr );
}
Table. appendChild (tbody );
// Google chrome 0.028
// IE 6 0.65
// IE 7 0.40
// Ie8 0.40
// Ie 9 0.35
// Firefox14 0.035
/// Opera12 0.03
// Safari5.17 0.014.
Document. body. appendChild (table );
Var m2 = microtime (true );
Alert (m2-m1 );
Script

Second, use createDocumentFragment.

The Code is as follows:

Http://www.w3.org/TR/html4/loose.dtd>



New Web Project


Script
Microtime = function (get_as_float ){
Var now = new Date (). getTime ()/1000;
Var s = parseInt (now, 10 );
Return (get_as_float )? Now: (Math. round (now-s) * 1000)/1000) + ''+ s;
}
Var m1 = microtime (true );
Var table = document. createElement ("table ");
Table. border = 1;
Var tbody = document. createElement ("tbody ");
Var fragment = document. createDocumentFragment ();
For (var I = 0; I <1000; I ++ ){
Var tr = document. createElement ("tr ");
For (var j = 0; j <5; j ++ ){
Var td = document. createElement ("td ");
Td. appendChild (document. createTextNode ("cell" + I + "," + j ));
Tr. appendChild (td );
}
Fragment. appendChild (tr );
}
Tbody. appendChild (fragment );
Table. appendChild (tbody );
// Google chrome 0.03
// IE 6 0.68
// IE 7 0.43
// Ie8 0.43
// Ie 9 0.37
// Firefox14 0.03
/// Opera12 0.04
// Safari5.17 0.023.
Document. body. appendChild (table );
Var m2 = microtime (true );
Alert (m2-m1 );
Script

Third: Using js native table operations

The Code is as follows:

Http://www.w3.org/TR/html4/loose.dtd>



New Web Project


Script
Microtime = function (get_as_float ){
Var now = new Date (). getTime ()/1000;
Var s = parseInt (now, 10 );
Return (get_as_float )? Now: (Math. round (now-s) * 1000)/1000) + ''+ s;
}
Var m1 = microtime (true );
Var table = document. createElement ("table ");
Table. border = 1;
Var tbody = document. createElement ("tbody ");
Table. appendChild (tbody );
For (var I = 0; I <1000; I ++ ){
Tbody. insertRow (I );
For (var j = 0; j <5; j ++ ){
Tbody. rows [I]. insertCell (j );
Tbody. rows [I]. cells [j]. appendChild (document. createTextNode ("cell" + I + "," + j ));
}
Var tr = document. createElement ("tr ");
Tbody. appendChild (tr );
}
// Google chrome 0.19
// Ie 9 0.18
// Ie8 0.25
// IE 7 8.50
// IE 6 20.45
// Firefox14 0.065
/// Opera12 0.25
// Safari5.17 0.18.
Document. body. appendChild (table );
Var m2 = microtime (true );
Alert (m2-m1 );
Script

The above shows that using native js to create a table is the most efficient. Using createDocumentFragment is not very advantageous (not as obvious as you said on the Internet ), insertRow and insertCell are not recommended for ie6 and 7.

The first algorithm is simply optimized:

The Code is as follows:

Http://www.w3.org/TR/html4/loose.dtd>



New Web Project


Script
Microtime = function (get_as_float ){
Var now = new Date (). getTime ()/1000;
Var s = parseInt (now, 10 );
Return (get_as_float )? Now: (Math. round (now-s) * 1000)/1000) + ''+ s;
}
Var m1 = microtime (true );
Var table = document. createElement ("table ");
Table. border = 1;
Var tbody = document. createElement ("tbody ");
Var I = 1000;
While (I --){
Var tr = document. createElement ("tr"), j = 5;
While (j --){
Var td = document. createElement ("td ");
Td. appendChild (document. createTextNode ("cell" + I + "," + j ));
Tr. appendChild (td );
}
Tbody. appendChild (tr );
}
Table. appendChild (tbody );
// Google chrome 0.03
// IE 6 0.66
// IE 7 0.41
// Ie8 0.41
// Ie 9 0.35
// Firefox14 0.03
/// Opera12 0.03
// Safari5.17 0.013.
Document. body. appendChild (table );
Var m2 = microtime (true );
Alert (m2-m1 );
Script

Summary:Try to use createElement and appendChild for dom operations. Be cautious with some special methods provided by the js kernel.