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