An efficiency comparison test for JavaScript composite concatenation strings

2020-03-30 04:14:18
OfStack

During script development, it is common to combine and concatenate a large string for output according to a certain rule. For example, the output of HTML tags that control the appearance of the entire control when writing script controls, or the dynamic analysis of creating HTML tags after obtaining the return value of the server side in AJAX, but I won't discuss the specific application of concatenation strings here, I just want to discuss the efficiency of concatenation here.

The concatenation of strings when we're writing code is using the operator +=, s += String; This is the most familiar way of writing, if you have noticed, when the combined string capacity is tens or even hundreds of K, the script execution is slow and the CPU usage is high, for example:



    var str = "01234567891123456789212345678931234567894123456789";

        str+= "51234567896123456789712345678981234567899123456789/n";

    var result = "";

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

In one step, the resulting string is 200K, the elapsed time is 1.1 seconds (this is related to the computer configuration), and the CPU peak is 100%. (I did a little more looping to see the effect more visually). It took me more than a second to do this, and with the rest of the code, the execution time of the entire script block was unbearable. Is there an optimal solution? Is there any other way? Of course the answer is yes, otherwise I would be writing nonsense.

A faster way to do this is to use arrays. Instead of concatenating them into a string, loop concatenating them into an array and use an array at the end.



    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;

You can test the time it takes to combine a string of the same size, and the result of my test here is: < 15 milliseconds, notice that it's in milliseconds, which means that the time consumption of the two modes is about two orders of magnitude to combine such a 200K string. What does that mean? It means that the latter has come back from work and lunch, while the former is still doing the drudgery. I wrote a test page, you can copy the following code to save as an HTM file in the web page open yourself to test the efficiency between the two, anyway I test the former took half a minute to complete, the latter 0.07 seconds to complete (loop 10,000 times).



<body>

 Number of string concatenation <input id="totle" value="1000" size="5" maxlength="5">

<input type="button" value=" String concatenation " onclick="method1()">

<input type="button" value=" Array assignment join method " onclick="method2()"><br>

<div id="method1"> </div>

<div id="method2"> </div>

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

<SCRIPT LANGUAGE="JavaScript">

<!--

//The length of the spliced string is 100 bytes by author: meizz

var str = "01234567891123456789212345678931234567894123456789";

    str+= "51234567896123456789712345678981234567899123456789/n";
//Method 1 

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 = " String concatenation: the large string length after concatenation  "+ result.length +" Bytes, "+

            " Splicing time consuming  "+ (new Date().getTime()-n) +" Ms! ";

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

}
//Method 2 

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 = " Array assignment join Method: large string length after splicing  "+ result.length +" Bytes, "+

            " Splicing time consuming  "+ (new Date().getTime()-n) +" Ms! ";

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

}

//-->

</SCRIPT>

Finally, I will say a few words, is the string concatenation in the future will be an array join? It depends on your actual needs. There is no need to use an array method with just a few ordinary or k-level byte combinations, because open array variables are also expensive. If there are more than a few K string combinations, then the array is efficient.

Internet explorer 6.0:

String concatenation method: the large string after concatenation is 1010000 bytes long, and the concatenation takes 22089 milliseconds!
Array assignment join method: the large string after concatenation is 1010000 bytes long, and the concatenation takes 218 milliseconds!

Firefox 1.0:

String concatenation method: the large string after concatenation is 1010000 bytes long and takes 1044 milliseconds to concatenate!
Array join method: the large string after concatenation is 1010000 bytes long and takes 1044 milliseconds to concatenate!

Mozilla 1.7:

String concatenation method: the large string after concatenation is 1010000 bytes long and takes 1045 milliseconds to concatenate!
Array join method: the large string after concatenation is 1010000 bytes long and takes 1044 milliseconds to concatenate!

Netscape 7.0:

String concatenation method: after the concatenation of large string length 1010000 bytes, concatenation time 10273 milliseconds!
Array join method: the large string after concatenation is 1010000 bytes long, and the concatenation takes 1138 milliseconds!

Opera 7.54:

String concatenation method: after the concatenation of large string length 1010000 bytes, concatenation time 6968 milliseconds!
Array assignment join method: the large string after concatenation is 1010000 bytes long and takes 6922 milliseconds to concatenate!

The results of the 10,000 test cycles show that in Internet explorer and Netscape, the two methods are significantly more efficient, and in Firefox, Mozilla and Opera, the time is basically the same, which is enough to determine that the array join method is better than the traditional string concatenation.