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>';
這種最常見的，但是效率最低！代碼邏輯相對來說復雜。
第二種：逐個 push 進數(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()），不管它后面是怎么實現(xiàn)的，一般都比其他方法快很多，而且代碼非常簡潔。
原文：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>';
這種最常見的，但是效率最低！代碼邏輯相對來說復雜。
第二種：逐個 push 進數(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()），不管它后面是怎么實現(xiàn)的，一般都比其他方法快很多，而且代碼非常簡潔。
使用原生的方法（比如 join()），不管它后面是怎么實現(xiàn)的，一般都比其他方法快很多，而且代碼非常簡潔。
瀏覽器性能
每種方法是使用一個長度為 130 的數(shù)組來測試，其中每個元素的長度是多種多樣的，防止瀏覽器對一定長度的字符串做特殊的優(yōu)化；每種方法測試了 1000 次；下面的結(jié)果顯示，執(zhí)行完這 1000 次需要的時間：
相關(guān)文章
RGB顏色值轉(zhuǎn)HTML十六進制(HEX)代碼的JS函數(shù)
轉(zhuǎn)到固定長度的十六進制字符串，不夠則補0 javascript找出一個背景色的數(shù)值，只好自己解析2009-04-04
微信小程序?qū)崿F(xiàn)根據(jù)字母選擇城市功能
這篇文章主要為大家詳細介紹了微信小程序中根據(jù)字母選擇城市的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
js實現(xiàn)iframe跨頁面調(diào)用函數(shù)的方法
這篇文章主要介紹了js實現(xiàn)iframe跨頁面調(diào)用函數(shù)的方法,實例展示了iframe中父頁面調(diào)用子頁面和子頁面調(diào)用父頁面的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了基于Bootstrap仿淘寶分頁控件實現(xiàn)代碼，本文分步驟給大家介紹的非常詳細，感興趣的朋友參考下吧2016-11-11
這篇文章主要為大家詳細介紹了前端js實現(xiàn)手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
使用element-plus時重寫樣式不起作用的問題及解決方法
這篇文章給大家介紹使用element-plus時重寫樣式不起作用的問題及解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-09-09
當頁面表單沒有提交直接返回時,要提示用戶是否保存當前信息,如果已經(jīng)提交就不提示了,下面小編給大家?guī)砹宋⑿判〕绦螯c擊左上角返回彈窗提示解決思路,感興趣的朋友一起看看吧2024-06-06
JavaScript實現(xiàn)twitter puddles算法實例
這篇文章主要介紹了JavaScript實現(xiàn)twitter puddles算法實例,本文源自twitter的一道面試題,本文使用js解開了這首題,需要的朋友可以參考下2014-12-12
使用原生JavaScript實現(xiàn)文字大小自適應的代碼示例
在現(xiàn)代Web開發(fā)中,文字大小自適應是一種常見的需求,尤其是在響應式設(shè)計中,通過原生JavaScript實現(xiàn)文字大小的動態(tài)調(diào)整,可以確保內(nèi)容在不同設(shè)備和屏幕尺寸下都能保持良好的可讀性和視覺效果,本文將深入探討如何使用原生JavaScript實現(xiàn)文字大小自適應,需要的朋友可以參考下2025-02-02
最近做項目遇到一需求要求實現(xiàn)數(shù)值從0到10來回變化，下面小編給大家分享下實現(xiàn)代碼，需要的朋友參考下2016-12-12