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/
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è)字符串相加
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ù)組
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)的，一般都比其他方法快很多，而且代碼非常簡(jiǎ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比較特別,第一種方法反而是最快的。
中文翻譯版本
第一種：逐個(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í)間：
您可能感興趣的文章:
- JS下高效拼裝字符串的幾種方法比較與測(cè)試代碼
- javascript下高性能字符串連接StringBuffer類
- javascript中字符串拼接需注意的問(wèn)題
- javascript中字符串替換函數(shù)replace()方法與c# 、vb 替換有一點(diǎn)不同
- JavaScript trim 去除字符串空格的三種方法(附代碼詳解)
- javascript轉(zhuǎn)換字符串為dom對(duì)象（字符串動(dòng)態(tài)創(chuàng)建dom）
- 在光標(biāo)處插入字符串的實(shí)現(xiàn)代碼 兼容IE,Firefox
- JavaScript 字符串操作的幾種常見(jiàn)方法
相關(guān)文章
RGB顏色值轉(zhuǎn)HTML十六進(jìn)制(HEX)代碼的JS函數(shù)
轉(zhuǎn)到固定長(zhǎng)度的十六進(jìn)制字符串，不夠則補(bǔ)0 javascript找出一個(gè)背景色的數(shù)值，只好自己解析2009-04-04
微信小程序?qū)崿F(xiàn)根據(jù)字母選擇城市功能
這篇文章主要為大家詳細(xì)介紹了微信小程序中根據(jù)字母選擇城市的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js實(shí)現(xiàn)iframe跨頁(yè)面調(diào)用函數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)iframe跨頁(yè)面調(diào)用函數(shù)的方法,實(shí)例展示了iframe中父頁(yè)面調(diào)用子頁(yè)面和子頁(yè)面調(diào)用父頁(yè)面的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
基于Bootstrap仿淘寶分頁(yè)控件實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Bootstrap仿淘寶分頁(yè)控件實(shí)現(xiàn)代碼，本文分步驟給大家介紹的非常詳細(xì)，感興趣的朋友參考下吧2016-11-11
jQuery實(shí)現(xiàn)手風(fēng)琴特效
這篇文章主要為大家詳細(xì)介紹了前端js實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
使用element-plus時(shí)重寫樣式不起作用的問(wèn)題及解決方法
這篇文章給大家介紹使用element-plus時(shí)重寫樣式不起作用的問(wèn)題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-09-09
當(dāng)頁(yè)面表單沒(méi)有提交直接返回時(shí),要提示用戶是否保存當(dāng)前信息,如果已經(jīng)提交就不提示了,下面小編給大家?guī)?lái)了微信小程序點(diǎn)擊左上角返回彈窗提示解決思路,感興趣的朋友一起看看吧2024-06-06
JavaScript實(shí)現(xiàn)twitter puddles算法實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)twitter puddles算法實(shí)例,本文源自twitter的一道面試題,本文使用js解開(kāi)了這首題,需要的朋友可以參考下2014-12-12
使用原生JavaScript實(shí)現(xiàn)文字大小自適應(yīng)的代碼示例
在現(xiàn)代Web開(kāi)發(fā)中,文字大小自適應(yīng)是一種常見(jiàn)的需求,尤其是在響應(yīng)式設(shè)計(jì)中,通過(guò)原生JavaScript實(shí)現(xiàn)文字大小的動(dòng)態(tài)調(diào)整,可以確保內(nèi)容在不同設(shè)備和屏幕尺寸下都能保持良好的可讀性和視覺(jué)效果,本文將深入探討如何使用原生JavaScript實(shí)現(xiàn)文字大小自適應(yīng),需要的朋友可以參考下2025-02-02
JS定時(shí)器實(shí)現(xiàn)數(shù)值從0到10來(lái)回變化
最近做項(xiàng)目遇到一需求要求實(shí)現(xiàn)數(shù)值從0到10來(lái)回變化，下面小編給大家分享下實(shí)現(xiàn)代碼，需要的朋友參考下2016-12-12