过年无聊写了一个Javascript中的类StringBuilder来连接字符串,并将其与String Concat进行了一下性能比较
测试脚本如下代码:
Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>JavaScript StringBuilder</title>
5 <script src="StringBuilder.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 <!--
8 function runTests()
9 {
10 // string concat test
11 var s = new String();
12
13 var startTime = new Date();
14
15 for (var i = 1; i < 5001; i++)
16 {
17 s += i + " Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.<br>";
18 }
19
20 var concatResult = s;
21
22 var endTime = new Date();
23 var concatTime = endTime - startTime;
24
25 // StringBuilder test
26 var sb = new StringBuilder();
27
28 startTime = new Date();
29
30 for (var i = 1; i < 5001; i++)
31 {
32 sb.append(i);
33 sb.append(" Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.<br>");
34 }
35
36 var sbResult = sb.toString();
37
38 endTime = new Date();
39 var sbTime = endTime - startTime;
40
41 document.writeln("String concat test complete. Total process time <b>" + concatTime + "</b> ms.<br>");
42 document.writeln("StringBuilder test complete. Total process time <b>" + sbTime + "</b> ms.<br>");
43 document.writeln("Resulting strings are " + ((concatResult == sbResult) ? "" : "NOT ") + "identical.<br>");
44 document.writeln("<br><b>String concat results:</b><br>");
45 document.writeln(concatResult);
46 document.writeln("<br><b>StringBuilder results:</b><br>");
47 document.writeln(sbResult);
48 }
49
50 function button_click()
51 {
52 document.body.innerHTML = "Running tests";
53 window.setTimeout(runTests, 0);
54 }
55 //-->
56 </script>
57 </head>
58 <body>
59 <form>
60 <input type="button" value="Click me to run tests" onclick="button_click();">
61 </form>
62 </body>
63 </html>
64
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>JavaScript StringBuilder</title>
5 <script src="StringBuilder.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 <!--
8 function runTests()
9 {
10 // string concat test
11 var s = new String();
12
13 var startTime = new Date();
14
15 for (var i = 1; i < 5001; i++)
16 {
17 s += i + " Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.<br>";
18 }
19
20 var concatResult = s;
21
22 var endTime = new Date();
23 var concatTime = endTime - startTime;
24
25 // StringBuilder test
26 var sb = new StringBuilder();
27
28 startTime = new Date();
29
30 for (var i = 1; i < 5001; i++)
31 {
32 sb.append(i);
33 sb.append(" Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.<br>");
34 }
35
36 var sbResult = sb.toString();
37
38 endTime = new Date();
39 var sbTime = endTime - startTime;
40
41 document.writeln("String concat test complete. Total process time <b>" + concatTime + "</b> ms.<br>");
42 document.writeln("StringBuilder test complete. Total process time <b>" + sbTime + "</b> ms.<br>");
43 document.writeln("Resulting strings are " + ((concatResult == sbResult) ? "" : "NOT ") + "identical.<br>");
44 document.writeln("<br><b>String concat results:</b><br>");
45 document.writeln(concatResult);
46 document.writeln("<br><b>StringBuilder results:</b><br>");
47 document.writeln(sbResult);
48 }
49
50 function button_click()
51 {
52 document.body.innerHTML = "Running tests";
53 window.setTimeout(runTests, 0);
54 }
55 //-->
56 </script>
57 </head>
58 <body>
59 <form>
60 <input type="button" value="Click me to run tests" onclick="button_click();">
61 </form>
62 </body>
63 </html>
64
自定义的StringBuilder类如下:
Code
1 function StringBuilder(value)
2 {
3 this.strings = new Array("");
4 this.append(value);
5 }
6
7 // Appends the given value to the end of this instance.
8 StringBuilder.prototype.append = function (value)
9 {
10 if (value)
11 {
12 this.strings.push(value);
13 }
14 }
15
16 // Clears the string buffer
17 StringBuilder.prototype.clear = function ()
18 {
19 this.strings.length = 1;
20 }
21
22 // Converts this instance to a String.
23 StringBuilder.prototype.toString = function ()
24 {
25 return this.strings.join("");
26 }
1 function StringBuilder(value)
2 {
3 this.strings = new Array("");
4 this.append(value);
5 }
6
7 // Appends the given value to the end of this instance.
8 StringBuilder.prototype.append = function (value)
9 {
10 if (value)
11 {
12 this.strings.push(value);
13 }
14 }
15
16 // Clears the string buffer
17 StringBuilder.prototype.clear = function ()
18 {
19 this.strings.length = 1;
20 }
21
22 // Converts this instance to a String.
23 StringBuilder.prototype.toString = function ()
24 {
25 return this.strings.join("");
26 }
本类中使用了prototype方法,此方法比较在类中定义方法,可以减少内存开销,因为prototype方式原理上就是
对象的浅拷贝,在内存中只使用对象的副本。
我们可以从以下的测试结果看出此两种方法的性能差距还是非常大的。
String concat test complete. Total process time 3950 ms.
StringBuilder test complete. Total process time 47 ms.
Resulting strings are identical.
希望此方法能帮助做javascript的朋友解决一些性能上的问题。