日期:2014-05-16 浏览次数:20396 次
在W3SCHOOL中有讨论js字符串连接方法性能对比的篇章如下:
对象令人感兴趣的一点是用它们解决问题的方式。ECMAScript 中最常见的一个问题是字符串连接的性能。与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变。请考虑下面的代码:
var str = "hello "; str += "world";
实际上,这段代码在幕后执行的步骤如下:
每次完成字符串连接都会执行步骤 2 到 6,使得这种操作非常消耗资源。如果重复这一过程几百次,甚至几千次,就会造成性能问题。解决方法是用 Array 对象存储字符串,然后用 join() 方法(参数是空字符串)创建最后的字符串。想象用下面的代码代替前面的代码:
var arr = new Array(); arr[0] = "hello "; arr[1] = "world"; var str = arr.join("");
这样,无论数组中引入多少字符串都不成问题,因为只在调用 join() 方法时才会发生连接操作。此时,执行的步骤如下:
虽然这种解决方案很好,但还有更好的方法。问题是,这段代码不能确切反映出它的意图。要使它更容易理解,可以用 StringBuffer 类打包该功能:
function StringBuffer () { this._strings_ = new Array(); } StringBuffer.prototype.append = function(str) { this._strings_.push(str); }; StringBuffer.prototype.toString = function() { return this._strings_.join(""); };
这段代码首先要注意的是 strings 属性,本意是私有属性。它只有两个方法,即 append() 和 toString() 方法。append() 方法有一个参数,它把该参数附加到字符串数组中,toString() 方法调用数组的 join 方法,返回真正连接成的字符串。要用 StringBuffer 对象连接一组字符串,可以用下面的代码:
var buffer = new StringBuffer (); buffer.append("hello "); buffer.append("world"); var result = buffer.toString();可用下面的代码测试 StringBuffer 对象和传统的字符串连接方法的性能:
var d1 = new Date(); var str = ""; for (var i=0; i < 10000; i++) { str += "text"; } var d2 = new Date(); document.write("Concatenation with plus: " + (d2.getTime() - d1.getTime()) + " milliseconds"); var buffer = new StringBuffer(); d1 = new Date(); for (var i=0; i < 10000; i++) { buffer.append("text"); } var result = buffer.toString(); d2 = new Date(); document.write("<br />Concatenation with StringBuffer: " + (d2.getTime() - d1.getTime()) + " milliseconds");这段代码对字符串连接进行两个测试,第一个使用加号,第二个使用 StringBuffer 类。每个操作都连接 10000 个字符串。日期值 d1 和 d2 用于判断完成操作需要的时间。请注意,创建 Date 对象时,如果没有参数,赋予对象的是当前的日期和时间。要计算连接操作历经多少时间,把日期的毫秒表示(用 getTime() 方法的返回值)相减即可。这是衡量 JavaScript 性能的常见方法。该测试的结果应该说明使用 StringBuffer 类比使用加号节省了 50% - 66% 的时间。
自己在本地的IE8中做了实验,平均十次取均值的结果是
Concatenation with plus:?23.5 milliseconds
Concatenation with StringBuffer: 42 milliseconds
将循环次数增加10倍,结果是
Concatenation with plus:?145.5 milliseconds
Concatenation with StringBuffer:?282.8 milliseconds
看起来好像是IE8早就将字符串+操作进行了优化,性能远远高于数组操作了,可是这里是将数组操作封装在一个自定义的StringBuffer 类里,通过调用它的函数来做连接操作,那么,直接用数组的操作结果如何呢?直接将以上代码稍作修改:
var buffer = new Array();
d1 = new Date();
for (var i=0; i < 10000; i++) {
??? buffer[i]="text";
}
var result = buffer.join("");
d2 = new Date();
document.write("<br />Concatenation with StringBuffer: "
?+ (d2.getTime() - d1.getTime()) + " milliseconds");
结果如下:
Concatenation with plus:?23.4 milliseconds
Concatenation with StringBuffer: 17.3milliseconds
将循环次数增加10倍,结果是
Concatenation with plus:?126.4milliseconds
Concatenation with StringBuffer:?98.5 milliseconds
从上面的结果可以看到,IE8调优的结果似乎还是没有直接使用数组来得快,看来调用函数所消耗的性能也不容小觑,另外,从这个例子中我们可以看到,真正要对某些操作进行调优时,必须实际试验过才行,书本的知识总是过时的。
在做这个实验的过程中,还在网上查找了相关文章,Heero的“再论Javascript下字符串连接的性能”里,描述了在IE多个版本的浏览器以及别的浏览器中做的实验结果,也充分说明了“浏览器的性能在不断地提高,作为前端工程师,也要适时调整Javascript程序的优化策略,以获得最佳的性能。”