Efficiency comparison test of JavaScript combination stitching string

During the development of the script, a large string is often combined to output according to a rule. For example, when writing a script control to control the appearance of the entire control of the HTML tag output, such as Ajax in the server side of the return value after the dynamic analysis of the creation of HTML tags, but here I do not discuss the specific application of splicing strings, I just want to discuss the efficiency of splicing here.

The concatenation of strings is the "+ +" operator, S = string, when we write code. This is our most well-known writing, do not know if you have not noticed that, in the combination of string capacity of dozens of k or even hundreds of K, the script executes slowly, CPU usage is high, for example:

copy code code as follows:


var str = "01234567891123456789212345678931234567894123456789";


str+= "51234567896123456789712345678981234567899123456789/n";


var result = "";


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

In this step, the resulting string is 200K, which is 1.1 seconds (this is related to the computer Configuration), and the CPU peak is 100%. (in order to see the effect more intuitively, I did some more loops). It is conceivable that this one-step operation consumes me more than a second time, plus other code time consumption, the entire script block execution time is unbearable. Is there any plan to optimize it? Is there any other way? The answer is certainly yes, otherwise I write this article is nonsense.

The quicker way to do this is to use an array, instead of stitching it into a string in a looping stitch, putting the string in an array, and finally using the array. Join ("") get the result string, code example:

copy code code as follows:


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 test, combined with a string of the same size of the time consumed, I tested here the result is: <15 milliseconds, please note that its unit is milliseconds, that is, the combination of such a 200K string, the two modes of time consumption is almost two orders of magnitude. What does that mean? That means the latter has finished the work and returned from lunch, the former still doing coolie. I write a test page, you can copy the following code down to save as an HTM file in the Web page to open their own to test the efficiency between the two, anyway, I tested the former will be half a minute to complete, the latter 0.07 seconds to finish (10,000 cycles).

copy code code as follows:


&lt;body&gt;


string concatenation number &lt;input id= "Totle" value= "1000" size= "5" maxlength= "5" &gt;


&lt;input type= "button" value= "string concatenation" onclick= "method1 ()" &gt;


&lt;input type= "button" value= "Array Assignment Join Method" onclick= "Method2 ()" &gt;&lt;br&gt;


&lt;div id= "method1" &gt; &lt;/div&gt;


&lt;div id= "Method2" &gt; &lt;/div&gt;


&lt;textarea id= "show" style= "width:100%; height:400 "&gt;&lt;/textarea&gt;


&lt;script language= "JavaScript" &gt;


&lt;!--


//This concatenation of the string length is 100 bytes Author:meizz


var str = "01234567891123456789212345678931234567894123456789";


str+= "51234567896123456789712345678981234567899123456789/n";

Method One
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 method: concatenation after the large character string length" + Result.length + "byte," +
"Stitching time consuming" + (new Date (). GetTime ()-N) + milliseconds! ";
document.getElementById ("Method1"). InnerHTML = S;
}

Method Two
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: Concatenation of large characters string length" + Result.length + "byte," +
"Stitching time consuming" + (new Date (). GetTime ()-N) + milliseconds! ";
document.getElementById ("Method2"). InnerHTML = S;
}
-->
</SCRIPT>

Finally, I say a few words, is not after the string stitching will be used to join the array? This depends on your actual needs, the normal number or K-class combination of bytes is not necessary to use the array method, because the open array variable is also consumed. If there are more than a few K string combinations, that is the efficiency of the array is high.

IE 6.0:

String concatenation method: After stitching the big character string length 1010000 bytes, the stitching takes 22089 milliseconds!
Array assignment Join method: After the concatenation of large characters string length 1010000 bytes, stitching takes 218 milliseconds!

Firefox 1.0:

String concatenation method: After stitching the big character string length 1010000 bytes, the stitching takes 1044 milliseconds!
Array assignment Join method: After the concatenation of large characters string length 1010000 bytes, stitching takes 1044 milliseconds!

Mozilla 1.7:

String concatenation method: After stitching the big character string length 1010000 bytes, the stitching takes 1045 milliseconds!
Array assignment Join method: After the concatenation of large characters string length 1010000 bytes, stitching takes 1044 milliseconds!

Netscape 7.0:

String concatenation method: After stitching the big character string length 1010000 bytes, the stitching takes 10273 milliseconds!
Array assignment Join method: After the concatenation of large characters string length 1010000 bytes, stitching takes 1138 milliseconds!

Opera 7.54:

String concatenation method: After stitching the big character string length 1010000 bytes, the stitching takes 6968 milliseconds!
Array assignment Join method: After the concatenation of large characters string length 1010000 bytes, stitching takes 6922 milliseconds!

The 10,000-time test results show that there is much greater efficiency in IE and Netscape, while in Firefox Mozilla Opera two methods are nearly as time-consuming as the data can be judged to be better than traditional string concatenation.