快捷導(dǎo)航

Fastest way to build an HTML string(拼裝html字符串的最快方法)

更新時(shí)間：2011年08月20日 23:19:16 作者：

Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 2009

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

復(fù)制代碼代碼如下:

 
var arr = ['item 1', 'item 2', 'item 3', ...], 
list = ''; 
for (var i = 0, l = arr.length; i < l; i++) { 
list += '<li>' + arr + '</li>'; 
} 
list = '<ul>' + list + '</ul>';//最低效的方式。 
var arr = ['item 1', 'item 2', 'item 3', ...], list = [];for (var i = 0, l = arr.length; i < l; i++) { list[list.length] = '<li>' + arr + '</li>';}list = '<ul>' + list.join('') + '</ul>';;//比上一種的方式快。 

var arr = ['item 1', 'item 2', 'item 3', ...];var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';//最優(yōu)的方式。 

執(zhí)行1000 次:"String concat"
(ms)
"Array pushing"
(ms)
"Native join()"
(ms)
Firefox 314714865Opera 917212578IE 7500229779Chrome 2638872Safari 4b14614160Averages20555970
只有chrome比較特別,第一種方法反而是最快的。

中文翻譯版本
第一種：逐個(gè)字符串相加

復(fù)制代碼代碼如下:

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

這種最常見(jiàn)的，但是效率最低！代碼邏輯相對(duì)來(lái)說(shuō)復(fù)雜。
第二種：逐個(gè) push 進(jìn)數(shù)組

復(fù)制代碼代碼如下:

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

比上一種方法稍微快一些，但還是不夠好…
第三種：直接join()

復(fù)制代碼代碼如下:

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

使用原生的方法（比如 join()），不管它后面是怎么實(shí)現(xiàn)的，一般都比其他方法快很多，而且代碼非常簡(jiǎn)潔。

使用原生的方法（比如 join()），不管它后面是怎么實(shí)現(xiàn)的，一般都比其他方法快很多，而且代碼非常簡(jiǎn)潔。

瀏覽器性能

每種方法是使用一個(gè)長(zhǎng)度為 130 的數(shù)組來(lái)測(cè)試，其中每個(gè)元素的長(zhǎng)度是多種多樣的，防止瀏覽器對(duì)一定長(zhǎng)度的字符串做特殊的優(yōu)化；每種方法測(cè)試了 1000 次；下面的結(jié)果顯示，執(zhí)行完這 1000 次需要的時(shí)間：

2009-09-08_124126