Comparison of the Efficiency of JavaScript String concatenation _ javascript skills

This article describes how to compare and test the efficiency of JavaScript String concatenation. This article tests IE6, Firefox, Mozilla, Netscape, Opera, and other browsers, for more information, see. 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:

The 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:

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

The Code is as follows:

String concatenation times