JS string connection [Performance comparison]_javascript skills

1. ECMAScript strings are immutable, that is, their values ​​cannot be changed, so what happens when you write the following code?
Js code

Copy code The code is as follows:

var str = "Hello ";
str = "world";

The steps to be performed are as follows:
Create a string to store "Hello"
Create a string to store "world"
Create storage Concatenate the string of the result
Copy the current content of str into the result
Copy "world" into the result
Update str so that it points to the result
Executed every time the concatenation of strings is completed Steps 2-6 make this operation very resource intensive. Imagine repeating this process hundreds, or even thousands, of times. What would the performance be like?
2. Then look at the following code to solve this dilemma
Js code

Copy code The code is as follows:

var arr = new Array;
arr[0] = "Hello ";
arr[1] = "world";
var str = arr.join("");

The steps performed are as follows:
Create strings to store the results
Copy each string to the appropriate location in the result
In this way, no matter how many strings are introduced into the array, it will not be a problem, because the connection operation will only occur when the join() method is called.
3. Do you think the operation is complicated? Code doesn’t exactly reflect its intent? So let’s use an object solution to make it easier to understand, and use the StringBuffer class to encapsulate this function:
Js code

Copy code The code is as follows:

function StringBuffer() {
this._strs = new Array;
}
StringBuffer.prototype.append = function (str) {
this._strs.push(str);
};
StringBuffer.prototype.toString = function() {
this._strs.join("");
};

Okay, let’s get a feel for it. How do we operate strings now?
Js code

Copy code The code is as follows:

var sb = new StringBuffer() ;
sb.append("Hello ");
sb.append("world");
var result = sb.toString();

four , it seems to be delicious, delicious, but what is the effect of eating it?
Js code

Copy code The code is as follows:

var tStart = new Date();
var str = "";
for(var i=0;i<10000;i )
{
str = "text"
}
var tEnd = new Date();
document.write("The original method plus sign to splice 10000 strings takes time:" (tEnd.getTime()-tStart.getTime()) "seconds");
var oSB = new StringBuffer();
tStart = new Date();
for(var i=0;i<10000;i )
{
oSB.append("text");
}
var sRst = oSB.toString();
tEnd = new Date();
document.write("
StringBuffer It takes time to splice 10000 strings:" ( tEnd.getTime()-tStart.getTime()) "seconds");

Maybe you have guessed that StringBuffer is faster, how much faster is it? My test results:
Js code
FF3.0.10
The original method plus sign takes time to splice 10,000 strings: 3 milliseconds
StringBuffer takes time to splice 10,000 strings: 8 milliseconds
IE7
The original method plus sign takes time to splice 10000 strings: 15 milliseconds
StringBuffer The time it takes to splice 10000 strings: 16 milliseconds
IE8
The original method plus sign The time it takes to splice 10,000 strings: 15 milliseconds
StringBuffer The time it takes to splice 10,000 strings: 16 milliseconds
Chrome1.0.154.46
The original method plus the time it takes to splice 10,000 strings: 1 millisecond
StringBuffer The time it takes to splice 10,000 strings: 2 milliseconds
5. What’s going on?
Huh? Eyesighted? Or are the test results posted wrong? still……?
Nothing is wrong!
The book "JavaScript Advanced Programming" was published in November 2006. It is on pages 84-85, which is what I said above. My test results are completely opposite to it. Is it a technological change or...?
I think it’s a lesson! A profound lesson! I don’t know what people who read this article will think.