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 string splicing, we always use the "+=" operator, 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 the number is tens or even hundreds of K, the script execution is very slow and the CPU usage is extremely high, for example:
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
var result = "";
for(var i=0; i<2000; i++) result += str;
In just one step, the result 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, instead of splicing it into a string, the string is put into an array, and finally array.join("") is used to get the result string. Code example:
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
var result = "", a = new Array();
for(var i=0; i<2000; i++) a[i] = str;
result = a.join(""); a = null;
You can test the time it takes to combine a string of the same size. The result I tested here is: <15 milliseconds. Please note that its unit It is milliseconds, which means that to assemble such 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, and the latter Or it can be done in 0.07 seconds (loop 10,000 times).
<body>
Number of string concatenations<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="String splicing method" 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 this spliced string is 100 bytes author: meizz
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789n";
//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 splicing method: the length of the large string after splicing"+ result.length +"bytes,"+
"Splicing takes time" + (new Date().getTime()-n) + "Milliseconds!";
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: the length of the large string after splicing"+ result.length +"bytes,"+
"Splicing takes time" + (new Date().getTime()-n) + "Milliseconds!";
document.getElementById("method2").innerHTML = s;
}
//-->
</SCRIPT>
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 1,010,000 bytes long, and the splicing takes 6,968 milliseconds!
Array assignment join method: The spliced large string is 1010000 bytes long, and the splicing takes 6922 milliseconds!
The test results of looping 10,000 times show that the efficiency can be greatly improved in IE and Netscape, while the time consumption of the two methods in Firefox Mozilla Opera is basically similar. These data are enough to determine that the array join method is better than traditional string splicing.