html數(shù)組字符串拼接的最快方法
更新時(shí)間：2009年09月16日 13:07:57 作者：
html字符串的連接方法有多種，但效率卻有很大區(qū)別，大家可以感覺需要選擇。
第一種：逐個(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>';
這種最常見的，但是效率最低！代碼邏輯相對(duì)來說復(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)的，一般都比其他方法快很多，而且代碼非常簡潔。
瀏覽器性能
每種方法是使用一個(gè)長度為 130 的數(shù)組來測試，其中每個(gè)元素的長度是多種多樣的，防止瀏覽器對(duì)一定長度的字符串做特殊的優(yōu)化；每種方法測試了 1000 次；下面的結(jié)果顯示，執(zhí)行完這 1000 次需要的時(shí)間：
復(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>';
這種最常見的，但是效率最低！代碼邏輯相對(duì)來說復(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)的，一般都比其他方法快很多，而且代碼非常簡潔。
瀏覽器性能
每種方法是使用一個(gè)長度為 130 的數(shù)組來測試，其中每個(gè)元素的長度是多種多樣的，防止瀏覽器對(duì)一定長度的字符串做特殊的優(yōu)化；每種方法測試了 1000 次；下面的結(jié)果顯示，執(zhí)行完這 1000 次需要的時(shí)間：
相關(guān)文章
微信h5靜默和非靜默授權(quán)獲取用戶openId的方法和步驟
這篇文章主要介紹了微信h5靜默和非靜默授權(quán)獲取用戶openId的方法和步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
phantomjs導(dǎo)出html到pdf的方法總結(jié)
這篇文章主要介紹了phantomjs導(dǎo)出html到pdf的方法總結(jié),需要的朋友可以參考下2017-10-10
javascript 另一種圖片滾動(dòng)切換效果思路
把圖片們用ul之類的包起來，并設(shè)置float。然后設(shè)置這個(gè)ul本身為absolute定位，其父標(biāo)簽用relative定位。通過設(shè)置ul的left或top值，實(shí)現(xiàn)圖片隊(duì)列的滾動(dòng)效果2012-04-04
原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)tab選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
關(guān)于arguments,callee,caller等的測試
關(guān)于arguments,callee,caller等的測試...2006-12-12
這篇文章主要介紹了解決超出JS的安全整數(shù)的限制范圍問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
js數(shù)字轉(zhuǎn)中文兩種實(shí)現(xiàn)方法
在前端開發(fā)中有時(shí)候會(huì)需要到將阿拉伯?dāng)?shù)字轉(zhuǎn)化為中文,當(dāng)前做個(gè)記錄,提供自己之后翻閱,這篇文章主要給大家介紹了關(guān)于js數(shù)字轉(zhuǎn)中文兩種實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2023-10-10
跟我學(xué)習(xí)javascript的函數(shù)和函數(shù)表達(dá)式
跟我學(xué)習(xí)javascript的函數(shù)和函數(shù)表達(dá)式，詳細(xì)介紹了函數(shù)表達(dá)式、命名函數(shù)表達(dá)式的方法，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了JavaScript的Proxy可以做哪些有意思的事兒,Proxy是ES6中提供的新的API，可以用來定義對(duì)象各種基本操作的自定義行為 （在文檔中被稱為traps，我覺得可以理解為一個(gè)針對(duì)對(duì)象各種行為的鉤子），,需要的朋友可以參考下2019-06-06
本文詳細(xì)介紹了js時(shí)間控件只顯示年月的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01