Fastest way to build an HTML string (fastest way to assemble html string)

Fastest way to build an HTML string (fastest way to assemble html string)_javascript skills

WBOY

Release： 2016-05-16 18:03:16

Original

1044 people have browsed it

Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 2009
Original text: http://james.padolsey.com/javascript/fastest-way-to-build-an-html- string/

Copy code The code is as follows:

var arr = ['item 1 ', 'item 2', 'item 3', ...], 
list = ''; 
for (var i = 0, l = arr.length; i < l; i ) { 
list = '' arr '
'; 
} 
list = '' list '';//The most efficient way. 
var arr = ['item 1', 'item 2', 'item 3', ...], list = [];for (var i = 0, l = arr.length; i < l; i ) { list[list.length] = '' arr '
';}list = '' list.join('') '';; //Faster than the previous method. 

var arr = ['item 1', 'item 2', 'item 3', ...];var list = '' arr.join('< /li>
') '
';//The best way. 

Execute 1000 times: "String concat"
(ms)
"Array pushing"
(ms)
"Native join()"
(ms )
Firefox 314714865Opera 917212578IE 7500229779Chrome 2638872Safari 4b14614160Averages20555970
Only chrome is special, the first method is the fastest.

Chinese translation version
The first type: adding strings one by one

Copy code The code is as follows:

var arr = ['item 1', 'item 2', 'item 3', ...], 
list = ''; 
 for (var i = 0, l = arr.length; i < l; i ) { 
list = '' arr[i] ''; 
} 
list = '< ;ul>' list ''; 

This is the most common, but the least efficient! The code logic is relatively complex.
Second type: push into the array one by one

Copy code The code is as follows:

var arr = ['item 1', 'item 2', 'item 3', ...], 
list = []; 
for (var i = 0, l = arr.length; i < l; i ) { 
list[list.length] = '' arr[i] ''; 
} 
list = '' list.join('') ''; 

Slightly faster than the previous method, but still not good enough...
Third method: direct join()

Copy code The code is as follows:

 
var arr = ['item 1', 'item 2', 'item 3', . ..]; 
var list = '' arr.join('
') '
'; 

Using native methods (such as join()), no matter how it is implemented later, is generally much faster than other methods, and the code is very concise.

Using native methods (such as join()), no matter how it is implemented later, is generally much faster than other methods, and the code is very concise.

Browser performance

Each method is tested using an array with a length of 130, in which the length of each element is varied to prevent the browser from making special optimizations for strings of a certain length; each method was tested 1,000 times ;The following results show the time required to execute these 1000 times:

2009-09-08_124126