Fastest way to build an HTML string(拼裝html字符串的最快方法)
更新時間: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/
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比較特別,第一種方法反而是最快的。
中文翻譯版本
第一種:逐個字符串相加
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>';
這種最常見的,但是效率最低!代碼邏輯相對來說復(fù)雜。
第二種:逐個 push 進(jìn)數(shù)組
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()
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
使用原生的方法(比如 join()),不管它后面是怎么實(shí)現(xiàn)的,一般都比其他方法快很多,而且代碼非常簡潔。
原文: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比較特別,第一種方法反而是最快的。
中文翻譯版本
第一種:逐個字符串相加
復(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>';
這種最常見的,但是效率最低!代碼邏輯相對來說復(fù)雜。
第二種:逐個 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)的,一般都比其他方法快很多,而且代碼非常簡潔。
使用原生的方法(比如 join()),不管它后面是怎么實(shí)現(xiàn)的,一般都比其他方法快很多,而且代碼非常簡潔。
瀏覽器性能
每種方法是使用一個長度為 130 的數(shù)組來測試,其中每個元素的長度是多種多樣的,防止瀏覽器對一定長度的字符串做特殊的優(yōu)化;每種方法測試了 1000 次;下面的結(jié)果顯示,執(zhí)行完這 1000 次需要的時間:
相關(guān)文章
JavaScript實(shí)現(xiàn)郵箱后綴提示功能的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)郵箱后綴提示功能的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12js 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)示例解析
這篇文章主要為大家介紹了js實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07js點(diǎn)擊出現(xiàn)場層層外點(diǎn)擊層消失的代碼
主要是修復(fù)了如果層上有東東的話,點(diǎn)擊也消失的情況2008-09-09