JavaScript speed: The efficiency of combining string concatenation

Source: Internet
Author: User
Tags date html tags join cpu usage
The javascript| string is often used to assemble a large string to output in the course of scripting development, 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:

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:

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).

<body>
string concatenation times <input id= "Totle" value= "1000" size= "5" maxlength= "5" >
<input type= "button" value= "string concatenation method" >
<input type= "button" value= "Array Assignment join method" ><br>
<div id= "Method1" > </div>
<div id= "Method2" > </div>
<textarea id= "Show" style= "width:100%; height:400 "></textarea>
<script language= "JavaScript" >
<!--
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.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.