Home > Developer > JavaScript
Comparison Test on the efficiency of String concatenation by JavaScript and comparison test by javascript
During script development, a large string is often combined and output according to a specific rule. For example, when writing a script control, you can control the HTML Tag output of the entire control's appearance. For example, when AJAX obtains the return value from the server and dynamically analyzes and creates HTML tags, however, I will not discuss the specific application of Concatenated strings here. I just want to discuss the splicing efficiency here.
String concatenation uses the "+ =" operator s + = String when writing code. This is the most well-known method. I wonder if you have noticed it, when the combined string capacity is dozens or even hundreds of K, the script execution is slow and the CPU usage is high. For example:
Copy codeThe Code is 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 200 kb and the time consumed is 1.1 seconds (this is related to the computer configuration). The peak CPU usage is 100%. (In order to see the effect more intuitively, I made more cycles ). It can be imagined that this step consumes more than one second, and the execution time of the entire script block will be unbearable, coupled with the time consumed by other code. Is there any optimization solution? Are there other methods? The answer is yes, or I will write this article as nonsense.
The faster way is to use arrays. During loop concatenation, strings are not concatenated into a string, but put into an array, and finally an array is used. join ("") to obtain the result string. Sample Code:
Copy codeThe Code is 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 and test the time consumed by combining a string of the same size. The test result here is: <15 ms. Note that the unit is milliseconds, that is to say, to combine such a K string, the time consumption of the two modes is about two orders of magnitude. What does this mean? This means that the latter has come back from work and is still working hard. I wrote a test page. You can copy the following code and save it as an HTM file. Open the page and test the efficiency of the two, I tested what the former did in half a minute, and the latter completed it in 0.07 seconds (10000 cycles ).
Copy codeThe Code is as follows:
<Body>
String concatenation Times <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 concatenated string is 100 bytes 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 method: large string length after splicing" + result. length + "byte," +
"Splicing time consumption" + (new Date (). getTime ()-n) + "millisecond! ";
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 + "byte," +
"Splicing time consumption" + (new Date (). getTime ()-n) + "millisecond! ";
Document. getElementById ("method2"). innerHTML = s;
}
// -->
</SCRIPT>
In the last few words, will all strings be joined using arrays after concatenation? This depends on your actual needs. There is no need to use the array method for the combination of several or K-level bytes, because opening the array variable is also consumable. If there is a combination of strings of several K or more, the array efficiency is high.
Internet Explorer 6.0:
String concatenation: the size of the spliced large string is 1010000 bytes long and takes 22089 milliseconds!
Array value assignment join: the size of the concatenated string is 1010000 bytes long, And the concatenation time is 218 milliseconds!
Firefox 1.0:
String concatenation: the size of the spliced large string is 1010000 bytes long and takes 1044 milliseconds!
Array value assignment join: the size of the concatenated string is 1010000 bytes long, And the concatenation time is 1044 milliseconds!
Mozilla 1.7:
String concatenation: the size of the spliced large string is 1010000 bytes long and takes 1045 milliseconds!
Array value assignment join: the size of the concatenated string is 1010000 bytes long, And the concatenation time is 1044 milliseconds!
Netscape 7.0:
String concatenation: the size of the spliced large string is 1010000 bytes long and takes 10273 milliseconds!
Array value assignment join: the size of the concatenated string is 1010000 bytes long, And the concatenation time is 1138 milliseconds!
Opera 7.54:
String concatenation: the size of the spliced large string is 1010000 bytes long and takes 6968 milliseconds!
Array value assignment join: the size of the concatenated string is 1010000 bytes long, And the concatenation time is 6922 milliseconds!
The testing results of the loop 10000 times show that the efficiency can be greatly improved in IE and Netscape, while the two methods in Firefox Mozilla Opera consume almost the same time, these data are sufficient to determine that the array join method is better than the traditional String concatenation method.
The tag is actually the background code. The <View: tag is executed before the page JAVASCRIPT code is executed. Therefore, an error occurs when the page is not reached, when the <View: ViewTag field = "'+ name +'"/> code is executed in the background, the '+ name +' code is unknown, so an error occurs.
How to splice strings with javascript
Var a = "abc ";
Var B = "123 ";
Alert (a + B );
Output: abc123
In js, concatenate a string with a plus sign
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
