javascript中拼接HTML字符串的最快、最好的方法
更新時間：2014年06月07日 09:44:24 作者：
這篇文章主要介紹了javascript中拼接HTML字符串的最快、最好的方法，本文共計介紹了3種方法,并對3個各自做了瀏覽器速度測試,需要的朋友可以參考下
第一種：逐個字符串相加
復(fù)制代碼 代碼如下:
var arr = ['item 1', 'item 2', 'item 3', ...];
list = '';
for (var i = 0,
l = arr.length; i < l; i++) {
list += '' + arr[i] + '';
}
list = '' + list + '';
這種最常見的，但是效率最低！代碼邏輯相對來說復(fù)雜。
第二種：逐個 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] = '' + arr[i] + '';
}
list = '' + list.join('') + '';
比上一種方法稍微快一些，但還是不夠好…
第三種：直接join()
復(fù)制代碼 代碼如下:
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '' + arr.join('') + '';
使用原生的方法（比如 join()），不管它后面是怎么實現(xiàn)的，一般都比其他方法快很多，而且代碼非常簡潔。
瀏覽器性能測試
每種方法是使用一個長度為 130 的數(shù)組來測試，其中每個元素的長度是多種多樣的，防止瀏覽器對一定長度的字符串做特殊的優(yōu)化；每種方法測試了 1000 次；下面的結(jié)果顯示，執(zhí)行完這 1000 次需要的時間：
相關(guān)文章
JS設(shè)置自定義快捷鍵并實現(xiàn)圖片上下左右移動
這篇文章主要介紹了JS設(shè)置自定義快捷鍵并實現(xiàn)圖片上下左右移動,文中通過使用自定義熱鍵或者使用鍵盤上下左右鍵移動圖片，以此來實現(xiàn)此功能，需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細(xì)介紹了如何分別使用Vue和JavaScript實現(xiàn)全選與反選功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
js實現(xiàn)簡易的單數(shù)字隨機(jī)抽獎（0-9）
這篇文章主要介紹了js實現(xiàn)簡易的單數(shù)字0-9隨機(jī)抽獎，可以控制抽取隨機(jī)數(shù)開始與停止，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
這篇文章主要介紹了JS?連接MQTT的使用方法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了js實現(xiàn)簡單選項卡與自動切換效果的方法,涉及javascript操作選項卡與自動切換效果的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了javascript cookie的簡單應(yīng)用，我們先介紹一下cookie的使用，以及我后面簡單封裝一個cookie操作的單例，便于實現(xiàn)cookie的設(shè)置，獲取，刪除的方法，感興趣的小伙伴們可以參考一下2016-02-02
微信小程序通過websocket實時語音識別的實現(xiàn)代碼
這篇文章主要介紹了微信小程序通過websocket實時語音識別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
關(guān)于div自適應(yīng)高度/左右高度自適應(yīng)一致的js代碼
在DIV和CSS進(jìn)行網(wǎng)頁布局中，DIV的自適應(yīng)高度和自適應(yīng)寬度是一個很常見的問題，本文將介紹左右自適應(yīng)高度一致的Jquery與DIV高度自適應(yīng)屏幕的js2013-03-03
這篇文章主要介紹了js實現(xiàn)簡單隨機(jī)抽獎的方法,涉及字符串的操作、setInterval定時調(diào)用等技巧,需要的朋友可以參考下2015-01-01
微信小程序canvas開發(fā)水果老虎機(jī)的思路詳解
這篇文章主要介紹了微信小程序canvas開發(fā)水果老虎機(jī)的思路，本文通過思路代碼分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02