天天看點
傳回

Javascript中的長字元串拼接

轉自: http://developer.51cto.com/art/201107/275070.htm

JavaScript組合拼接字元串的效率。在腳本開發過程中，經常會按照某個規則，組合拼接出一個大字元串進行輸出。比如寫腳本控件時控制整個控件的外觀的HTML标簽輸出，比如AJAX裡得到伺服器端的回傳值後動态分析建立HTML标簽時，不過這裡我就不讨論拼接字元串的具體應用了，我隻是想在這裡讨論一下拼接的效率。

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

     
  1.  var str = "01234567891123456789212345678931234567894123456789";         
    2.       
  2.  str+= "51234567896123456789712345678981234567899123456789/n";         
    3.       
  3.  var result = "";         
    4.       
  4.  for(var i=0; i<2000; i++) result += str;        
    5.

就這麼一步操作，産生的結果字元串是200K，耗時是1.1秒（這個與電腦組態有關），CPU的峰值100%。（為了更直覺地看到效果，我多做了些循環）。可想而知就這麼一步操作就消耗了我一秒多的時間，再加上其它的代碼的時間消耗，那整個腳本塊的執行時間就難以忍受了。那有沒有優化的方案呢？還有其它的方法嗎？答案當然是有的，否則我寫這篇文章就是廢話。

更快的方式就是使用數組，在循環拼接的時候不是相接拼接到某個字元串裡去，而是把字元串放到一個數組裡，最後用數組.join("") 得到結果字元串，代碼示例：

     
  1.  var str = "01234567891123456789212345678931234567894123456789";         
    2.       
  2.  str+= "51234567896123456789712345678981234567899123456789/n";         
    3.       
  3.  var result = "", a = new Array();         
    4.       
  4.  for(var i=0; i<2000; i++) a[i] = str;         
    5.       
  5.  result = a.join(""); a = null;        
    6.

大家可以測試測試，組合出一個相同大小的字元串所消耗的時間，我這裡測試出來的結果是：<15毫秒，請注意，它的機關是毫秒，也就是說組合出這麼一個200K的字元串，兩種模式的時間消耗是差不多兩個數量級。這意味着什麼？意味着後者已經工作結束吃完中飯回來，前者還在做着苦力。我寫一個測試頁面，大家可以把下面這些代碼拷貝下來另存為一個HTM檔案在網頁裡打開自己來測試一下兩者之間的效率差，反正我測試的是前者要半分鐘才能完成的事，後者0.07秒就搞定了（循環10000次）。

     
  1.  <body>         
    2.       
  2.  字元串拼接次數<input id="totle" value="1000" size="5" maxlength="5">         
    3.       
  3.  <input type="button" value="字元串拼接法" οnclick="method1()">         
    4.       
  4.  <input type="button" value="數組指派join法" οnclick="method2()"><br>         
    5.       
  5.  <div id="method1">&nbsp;</div>         
    6.       
  6.  <div id="method2">&nbsp;</div>         
    7.       
  7.  <textarea id="show" style="width: 100%; height: 400"></textarea>         
    8.       
  8.  <SCRIPT LANGUAGE="JavaScript">         
    9.       
  9.  <!--         
    10.       
  10.  //這個被拼接的字元串長是100位元組 author: meizz         
    11.       
  11.  var str = "01234567891123456789212345678931234567894123456789";         
    12.       
  12.  str+= "51234567896123456789712345678981234567899123456789/n";        
    13.

方法一

     
  1.  function method1()         
    2.       
  2.  {         
    3.       
  3.  var result = "";         
    4.       
  4.  var totle = parseInt(document.getElementById("totle").value);         
    5.       
  5.  var n = new Date().getTime();         
    6.       
  6.  for(var i=0; i<totle; i++)         
    7.       
  7.  {         
    8.       
  8.  result += str;         
    9.       
  9.  }         
    10.       
  10.  document.getElementById("show").value = result;         
    11.       
  11.  var s = "字元串拼接法：拼接後的大字元串長 "+ result.length +"位元組，"+         
    12.       
  12.  "拼接耗時 "+ (new Date().getTime()-n) +"毫秒！";         
    13.       
  13.  document.getElementById("method1").innerHTML = s;         
    14.       
  14.  }        
    15.

方法二

     
  1.  function method2()         
    2.       
  2.  {         
    3.       
  3.  var result = "";         
    4.       
  4.  var totle = parseInt(document.getElementById("totle").value);         
    5.       
  5.  var n = new Date().getTime();         
    6.       
  6.  var a = new Array();         
    7.       
  7.  for(var i=0; i<totle; i++)         
    8.       
  8.  {         
    9.       
  9.  a[i] = str;         
    10.       
  10.  }         
    11.       
  11.  result = a.join(""); a=null;         
    12.       
  12.  document.getElementById("show").value = result;         
    13.       
  13.  var s = "數組指派join法：拼接後的大字元串長 "+ result.length +"位元組，"+         
    14.       
  14.  "拼接耗時 "+ (new Date().getTime()-n) +"毫秒！";         
    15.       
  15.  document.getElementById("method2").innerHTML = s;         
    16.       
  16.  }         
    17.       
  17.  //-->         
    18.       
  18.  </SCRIPT>        
    19.

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

IE 6.0:

字元串拼接法：拼接後的大字元串長 1010000位元組，拼接耗時 22089毫秒！

數組指派join法：拼接後的大字元串長 1010000位元組，拼接耗時 218毫秒！

Firefox 1.0:

字元串拼接法：拼接後的大字元串長 1010000位元組，拼接耗時 1044毫秒！

數組指派join法：拼接後的大字元串長 1010000位元組，拼接耗時 1044毫秒！

Mozilla 1.7:

字元串拼接法：拼接後的大字元串長 1010000位元組，拼接耗時 1045毫秒！

數組指派join法：拼接後的大字元串長 1010000位元組，拼接耗時 1044毫秒！

Netscape 7.0:

字元串拼接法：拼接後的大字元串長 1010000位元組，拼接耗時 10273毫秒！

數組指派join法：拼接後的大字元串長 1010000位元組，拼接耗時 1138毫秒！

Opera 7.54:

字元串拼接法：拼接後的大字元串長 1010000位元組，拼接耗時 6968毫秒！

數組指派join法：拼接後的大字元串長 1010000位元組，拼接耗時 6922毫秒！

循環10000次的測試結果表明在IE和Netscape裡可以大大提高效率，而在Firefox Mozilla Opera 裡兩種方法耗時基本相近，這些資料足可以判定數組join法優于傳統字元串拼接。

希望通過本文對JavaScript組合拼接字元串的效率的介紹，能夠給你帶來幫助。

javascript join mozilla 測試 Firefox 腳本
上一篇: View.OnCreateContextMenuListener的調用順序
下一篇: 控件系統大綱

繼續閱讀