html數(shù)組字符串拼接的最快方法
更新時(shí)間：2009年09月16日 13:07:57 作者：
html字符串的連接方法有多種，但效率卻有很大區(qū)別，大家可以感覺(jué)需要選擇。
第一種：逐個(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)潔。
瀏覽器性能
每種方法是使用一個(gè)長(zhǎng)度為 130 的數(shù)組來(lái)測(cè)試，其中每個(gè)元素的長(zhǎng)度是多種多樣的，防止瀏覽器對(duì)一定長(zhǎng)度的字符串做特殊的優(yōu)化；每種方法測(cè)試了 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>';
這種最常見(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)潔。
瀏覽器性能
每種方法是使用一個(gè)長(zhǎng)度為 130 的數(shù)組來(lái)測(cè)試，其中每個(gè)元素的長(zhǎng)度是多種多樣的，防止瀏覽器對(duì)一定長(zhǎng)度的字符串做特殊的優(yōu)化；每種方法測(cè)試了 1000 次；下面的結(jié)果顯示，執(zhí)行完這 1000 次需要的時(shí)間：
相關(guān)文章
本文主要介紹了JavaScript獲取URL參數(shù)的方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript 學(xué)習(xí)筆記（七）字符串的連接
javascript 字符串的連接效率問(wèn)題，需要的朋友可以參考下。2009-12-12
uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能
這篇文章主要為大家詳細(xì)介紹了uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
js判斷一點(diǎn)是否在一個(gè)三角形內(nèi)
判斷一個(gè)點(diǎn)是否在一個(gè)三角行內(nèi)的代碼2008-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
基于javascript顯示當(dāng)前時(shí)間以及倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了基于javascript顯示當(dāng)前時(shí)間以及倒計(jì)時(shí)功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能
本文主要介紹了js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
waypoints的功能非常強(qiáng)大，一款用于捕獲各種滾動(dòng)事件的插件，下面跟隨腳本之家小編一起學(xué)習(xí)JS庫(kù)之Waypoints的用法吧2017-09-09
JavaScript性能陷阱小結(jié)(附實(shí)例說(shuō)明)
JavaScript陷阱太多，因此我們得步步為營(yíng)，下面這些點(diǎn)，相信很多同學(xué)都會(huì)遇到，希望朋友們多注意下。JavaScript陷阱太多，因此我們得步步為營(yíng)，下面是一些常見(jiàn)的影響性能的陷阱。2010-12-12
通過(guò)Kettle自定義jar包供javascript使用
這篇文章主要介紹了通過(guò)Kettle自定義jar包供javascript使用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01