狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

[轉(zhuǎn)帖]談JavaScript組合拼接字符串的效率

liguoquan
2024年3月9日 17:20 本文熱度 1069
：談JavaScript組合拼接字符串的效率


JavaScript組合拼接字符串的效率。在腳本開發(fā)過程中，經(jīng)常會按照某個規(guī)則，組合拼接出一個大字符串進(jìn)行輸出。比如寫腳本控件時控制整個控件的外觀的HTML標(biāo)簽輸出，比如AJAX里得到服務(wù)器端的回傳值后動態(tài)分析創(chuàng)建HTML標(biāo)簽時，不過這里我就不討論拼接字符串的具體應(yīng)用了，我只是想在這里討論一下拼接的效率。

字符串的拼接在我們寫代碼的時候都是用“+=”這個運(yùn)算符，s += String; 這是我們最為熟知的寫法，不知道大家有沒有注意過沒有，在組合的字符串容量有幾十K甚至幾百K的時候，腳本執(zhí)行起來很慢，CPU使用率狂高，例如：

  1. var str = "01234567891123456789212345678931234567894123456789";  

  2. str+= "51234567896123456789712345678981234567899123456789/n";  

  3. var result = "";  

  4. for(var i=0; i<2000; i++) result += str; 

就這么一步操作，產(chǎn)生的結(jié)果字符串是200K，耗時是1.1秒（這個與電腦配置有關(guān)），CPU的峰值100%。（為了更直觀地看到效果，我多做了些循環(huán)）。可想而知就這么一步操作就消耗了我一秒多的時間，再加上其它的代碼的時間消耗，那整個腳本塊的執(zhí)行時間就難以忍受了。那有沒有優(yōu)化的方案呢？還有其它的方法嗎？答案當(dāng)然是有的，否則我寫這篇文章就是廢話。

更快的方式就是使用數(shù)組，在循環(huán)拼接的時候不是相接拼接到某個字符串里去，而是把字符串放到一個數(shù)組里，最后用數(shù)組.join("") 得到結(jié)果字符串，代碼示例：

  1. var str = "01234567891123456789212345678931234567894123456789";  

  2. str+= "51234567896123456789712345678981234567899123456789/n";  

  3. var result = "", a = new Array();  

  4. for(var i=0; i<2000; i++) a[i] = str;  

  5. result = a.join(""); a = null; 

大家可以測試測試，組合出一個相同大小的字符串所消耗的時間，我這里測試出來的結(jié)果是：<15毫秒，請注意，它的單位是毫秒，也就是說組合出這么一個200K的字符串，兩種模式的時間消耗是差不多兩個數(shù)量級。這意味著什么？意味著后者已經(jīng)工作結(jié)束吃完中飯回來，前者還在做著苦力。我寫一個測試頁面，大家可以把下面這些代碼拷貝下來另存為一個HTM文件在網(wǎng)頁里打開自己來測試一下兩者之間的效率差，反正我測試的是前者要半分鐘才能完成的事，后者0.07秒就搞定了（循環(huán)10000次）。

  1. <body>  

  2. 字符串拼接次數(shù)<input id="totle" value="1000" size="5" maxlength="5">  

  3. <input type="button" value="字符串拼接法" onclick="method1()">  

  4. <input type="button" value="數(shù)組賦值join法" onclick="method2()"><br>  

  5. <div id="method1">&nbsp;</div>  

  6. <div id="method2">&nbsp;</div>  

  7. <textarea id="show" style="width: 100%; height: 400"></textarea>  

  8. <script LANGUAGE="JavaScript">  

  9. <!--  

  10. //這個被拼接的字符串長是100字節(jié) author: meizz  

  11. var str = "01234567891123456789212345678931234567894123456789";  

  12. str+= "51234567896123456789712345678981234567899123456789/n"; 

方法一

  1. function method1()  

  2. {  

  3. var result = "";  

  4. var totle = parseInt(document.getElementById("totle").value);  

  5. var n = new Date().getTime();  

  6. for(var i=0; i<totle; i++)  

  7. {  

  8. result += str;  

  9. }  

  10. document.getElementById("show").value = result;  

  11. var s = "字符串拼接法：拼接后的大字符串長 "+ result.length +"字節(jié)，"+  

  12. "拼接耗時 "+ (new Date().getTime()-n) +"毫秒！";  

  13. document.getElementById("method1").innerHTML = s;  

  14. } 

方法二

  1. function method2()  

  2. {  

  3. var result = "";  

  4. var totle = parseInt(document.getElementById("totle").value);  

  5. var n = new Date().getTime();  

  6. var a = new Array();  

  7. for(var i=0; i<totle; i++)  

  8. {  

  9. a[i] = str;  

  10. }  

  11. result = a.join(""); a=null;  

  12. document.getElementById("show").value = result;  

  13. var s = "數(shù)組賦值join法：拼接后的大字符串長 "+ result.length +"字節(jié)，"+  

  14. "拼接耗時 "+ (new Date().getTime()-n) +"毫秒！";  

  15. document.getElementById("method2").innerHTML = s;  

  16. }  

  17. //-->  

  18. </script> 

最后我再說幾句，是不是以后字符串拼接就一律使用數(shù)組join呢？這個要看你的實際需求了，就普通的幾個或者K級的字節(jié)的組合就沒有必要使用數(shù)組法了，因為開數(shù)組變量也是有消耗的。若有幾K以上的字符串組合，那就是數(shù)組的效率高了。

IE 6.0:

字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 22089毫秒！

數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 218毫秒！

Firefox 1.0:

字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 1044毫秒！

數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 1044毫秒！

Mozilla 1.7:

字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 1045毫秒！

數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 1044毫秒！

Netscape 7.0:

字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 10273毫秒！

數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 1138毫秒！

Opera 7.54:

字符串拼接法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 6968毫秒！

數(shù)組賦值join法：拼接后的大字符串長 1010000字節(jié)，拼接耗時 6922毫秒！

循環(huán)10000次的測試結(jié)果表明在IE和Netscape里可以大大提高效率，而在Firefox Mozilla Opera 里兩種方法耗時基本相近，這些數(shù)據(jù)足可以判定數(shù)組join法優(yōu)于傳統(tǒng)字符串拼接。


該文章在 2024/3/9 17:20:15 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊、財務(wù)費(fèi)用、相關(guān)報表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved