During script development, a large string is often combined and spliced into a large string for output according to a certain rule. For example, when writing script controls, the output of HTML tags that control the appearance of the entire control. For example, when dynamically analyzing the HTML tags after obtaining the server-side back value in AJAX, I will not discuss the specific application of splicing strings here. I just want to discuss the efficiency of splicing here.
When we write code, we use the "+=" operator, s += String; This is the most familiar way to write. I wonder if you have noticed it. When the combined string capacity is tens of K or even hundreds of K, the script is very slow to execute and the CPU usage rate is very high, for example:
The code copy is as follows:
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
var result = "";
for(var i=0; i<2000; i++) result += str;
In just one step, the result string generated is 200K, which takes 1.1 seconds (this is related to computer configuration), and the CPU peak is 100%. (I did more loops to see the effect more intuitively). It can be imagined that just one step of operation took me more than a second, and coupled with the time spent on other codes, the execution time of the entire script block would be unbearable. So is there an optimization solution? Is there any other way? Of course there is an answer, otherwise I would be nonsense to write this article.
A faster way is to use an array. When scattering loops, it is not to splice it into a certain string, but to put the string into an array, and finally use the array.join("") to get the result string. Code example:
The code copy 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 it takes to combine a string of the same size. The result I tested here is: <15 milliseconds. Please note that its unit is milliseconds. That is to say, combining such a 200K string, the time consumption of the two modes is about two orders of magnitude. what does that mean? This means that the latter has finished his work and returned from lunch, while the former is still working as a coolie. I'll write 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 difference in efficiency between the two. Anyway, I'm testing the former that takes half a minute to complete, and the latter that takes 0.07 seconds (10,000 loops).
The code copy is as follows:
<body>
Number of string splicing times<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"></textarea>
<SCRIPT LANGUAGE="JavaScript">
<!--
//The length of this string being spliced 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 splicing method: the spliced large string is long"+ result.length + "byte,"+
"Split 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 spliced large string is long" + result.length + "byte," +
"Split time" + (new Date().getTime()-n) + "milliseconds!";
document.getElementById("method2").innerHTML = s;
}
//-->
</SCRIPT>
Finally, I will say a few more words. Will all string splicing use array joins in the future? This depends on your actual needs. There is no need to use the array method for ordinary combinations of several or K-level bytes, because opening array variables are also consumed. If there are more than a few K string combinations, it means that the array is efficient.
IE 6.0:
String splicing method: The spliced large string is 1010,000 bytes long, and the splicing takes 22,089 milliseconds!
Array assignment join method: The spliced large string is 1010,000 bytes long, and it takes 218 milliseconds to splice!
Firefox 1.0:
String splicing method: The spliced large string is 1010,000 bytes long, and the splicing takes 1044 milliseconds!
Array assignment join method: The spliced large string is 1010,000 bytes long, and the splicing takes 1044 milliseconds!
Mozilla 1.7:
String splicing method: The spliced large string is 1010,000 bytes long, and the splicing takes 1045 milliseconds!
Array assignment join method: The spliced large string is 1010,000 bytes long, and the splicing takes 1044 milliseconds!
Netscape 7.0:
String splicing method: The spliced large string is 1010,000 bytes long, and the splicing takes 10,273 milliseconds!
Array assignment join method: The spliced large string is 1010,000 bytes long, and it takes 1138 milliseconds to splice!
Opera 7.54:
String splicing method: The spliced large string is 1010,000 bytes long, and the splicing takes 6968 milliseconds!
Array assignment join method: The spliced large string is 1010,000 bytes long, and the splicing takes 6922 milliseconds!
The test results of 10,000 cycles show that efficiency can be greatly improved in IE and Netscape, while in Firefox Mozilla Opera, the two methods take almost the same time. These data can be sufficient to determine that the array join method is better than traditional string splicing.