JavaScript極速狂飆:組合拼接字串的效率

來源:互聯網
上載者:User
javascript|字串     在指令碼開發過程中,經常會按照某個規則,組合拼接出一個大字串進行輸出。比如寫指令碼控制項時控制整個控制項的外觀的HTML標籤輸出,比如AJAX裡得到伺服器端的回傳值後動態分析建立HTML標籤時,不過這裡我就不討論拼接字串的具體應用了,我只是想在這裡討論一下拼接的效率。

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

    var str = "01234567891123456789212345678931234567894123456789";
        str+= "51234567896123456789712345678981234567899123456789\n";
    var result = "";
    for(var i=0; i<2000; i++) result += str;

    就這麼一步操作,產生的結果字串是200K,耗時是1.1秒(這個與電腦配置有關),CPU的峰值100%。(為了更直觀地看到效果,我多做了些迴圈)。可想而知就這麼一步操作就消耗了我一秒多的時間,再加上其它的代碼的時間消耗,那整個指令碼塊的執行時間就難以忍受了。那有沒有最佳化的方案呢?還有其它的方法嗎?答案當然是有的,否則我寫這篇文章就是廢話。

    更快的方式就是使用數組,在迴圈拼接的時候不是相接拼接到某個字串裡去,而是把字串放到一個數組裡,最後用數組.join("") 得到結果字串,程式碼範例:

    var str = "01234567891123456789212345678931234567894123456789";
        str+= "51234567896123456789712345678981234567899123456789\n";
    var result = "", a = new Array();
    for(var i=0; i<2000; i++) a[i] = str;
    result = a.join(""); a = null;

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

<body>
字串拼接次數<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="字串拼接法" >
<input type="button" value="數組賦值join法" ><br>
<div id="method1"> </div>
<div id="method2"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">
<!--
//這個被拼接的字串長是100位元組 author: meizz
var str = "01234567891123456789212345678931234567894123456789";
    str+= "51234567896123456789712345678981234567899123456789\n";

//方法一
function method1()
{
    var result = "";
    var totle  = parseInt(document.getElementById("totle").value);
    var n = new Date().getTime();

    for(var i=0; i<totle; i++)
    {
        result += str;
    }

    document.getElementById("show").value = result;
    var s = "字串拼接法:拼接後的大字串長 "+ result.length +"位元組,"+
            "拼接耗時 "+ (new Date().getTime()-n) +"毫秒!";
    document.getElementById("method1").innerHTML = s;
}

//方法二
function method2()
{
    var result = "";
    var totle  = parseInt(document.getElementById("totle").value);
    var n = new Date().getTime();

    var a = new Array();
    for(var i=0; i<totle; i++)
    {
        a[i] = str;
    }
    result = a.join(""); a=null;

    document.getElementById("show").value = result;
    var s = "數組賦值join法:拼接後的大字串長 "+ result.length +"位元組,"+
            "拼接耗時 "+ (new Date().getTime()-n) +"毫秒!";
    document.getElementById("method2").innerHTML = s;
}
//-->
</SCRIPT>

    最後我再說幾句,是不是以後字串拼接就一律使用數組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法優於傳統字串拼接。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。