Efficiency comparison test of JavaScript combination and string concatenation_javascript skills

During the script development process, a large string is often combined and spliced ​​for output according to a certain rule. For example, when writing a script control, the HTML tag output that controls the appearance of the entire control, or when dynamically analyzing and creating HTML tags after obtaining the server-side return value in AJAX, but I will not discuss the specific application of splicing strings here. I just want to Let’s discuss the efficiency of splicing here.

When we write code, we always use the "=" operator when we write code, s = String; this is the most familiar writing method. I don’t know if you have noticed that the capacity of the combined string is When there are tens of K or even hundreds of K, the script execution is very slow and the CPU usage is extremely high, for example:

With this one-step operation, the resulting string is 200K, it takes 1.1 seconds (this is related to the computer configuration), and the CPU peak value is 100%. (In order to see the effect more intuitively, I made some more loops). It is conceivable that just such a step of operation consumes more than a second of my time. Coupled with the time consumption of other codes, the execution time of the entire script block becomes unbearable. Is there any optimization solution? Is there any other way? The answer is of course yes, otherwise it would be nonsense for me to write this article.

The faster way is to use an array. When splicing in a loop, it is not concatenated into a string. Instead, the string is put into an array, and finally array.join("") is used to get the result. String, code example:

You can test the time it takes to assemble a string of the same size. The result I tested here is: <15 milliseconds. Please note that its unit is milliseconds, which means that it is possible to assemble such a string. For a 200K string, the time consumption of the two modes is almost two orders of magnitude. what does that mean? It means that the latter has finished work and returned from lunch, while the former is still doing hard work. I wrote a test page. You can copy the following code and save it as an HTM file and open it on the web page to test the efficiency difference between the two. Anyway, what I tested is that the former takes half a minute to complete. Or it can be done in 0.07 seconds (loop 10,000 times).

Finally, let me say a few words. Will array join be used for string splicing in the future? This depends on your actual needs. For ordinary combinations of a few or K-level bytes, there is no need to use the array method, because opening array variables is also expensive. If there are more than a few K string combinations, the efficiency of the array is high.

IE 6.0:

String splicing method: The spliced ​​large string is 1,010,000 bytes long, and the splicing takes 22,089 milliseconds!
Array assignment join method: The spliced ​​large string is 1,010,000 bytes long, and the splicing takes 218 milliseconds!

Firefox 1.0:

String splicing method: The spliced ​​large string is 1,010,000 bytes long, and the splicing takes 1,044 milliseconds!
Array assignment join method: The spliced ​​large string is 1,010,000 bytes long, and the splicing takes 1,044 milliseconds!

Mozilla 1.7:

String splicing method: The spliced ​​large string is 1,010,000 bytes long, and the splicing takes 1,045 milliseconds!
Array assignment join method: The spliced ​​large string is 1,010,000 bytes long, and the splicing takes 1,044 milliseconds!

Netscape 7.0:

String splicing method: The spliced ​​large string is 1,010,000 bytes long, and the splicing takes 10,273 milliseconds!
Array assignment join method: The spliced ​​large string is 1,010,000 bytes long, and the splicing takes 1,138 milliseconds!

Opera 7.54:

String splicing method: The spliced ​​large string is 1010000 bytes long, and the splicing takes 6968 milliseconds!
Array assignment join method: The concatenated large string is 1,010,000 bytes long, and the concatenation takes 6,922 milliseconds!

The test results of looping 10,000 times show that the efficiency can be greatly improved in IE and Netscape, while in Firefox Mozilla Opera, the two methods take basically the same time. These data are enough to determine that the array join method is better than traditional string splicing.