原创

关于字符串连接性能问题


看以下代码
var str = "hello ";
str += "world";
他的代码执行步骤为
  1. 创建存储 "hello " 的字符串。
  2. 创建存储 "world" 的字符串。
  3. 创建存储连接结果的字符串。
  4. 把 str 的当前内容复制到结果中。
  5. 把 "world" 复制到结果中。
  6. 更新 str,使它指向结果。
  • 每次完成字符串连接都会执行步骤 2 到 6,使得这种操作非常消耗资源。如果重复这一过程几百次,甚至几千次,就会造成性能问题。解决方法是用 Array 对象存储字符串,然后用 join() 方法(参数是空字符串)创建最后的字符串
再看以下第二种写法
var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");
他的代码执行步骤为
  1. 创建存储结果的字符串
  2. 把每个字符串复制到结果中的合适位置
  • 这样,无论数组中引入多少字符串都不成问题,因为只在调用 join() 方法时才会发生连接操作
再看第三种写法
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();

性能测试

  1. 普通 “+” 连接
 var d1 = new Date();
    var str = "";
    for (var i=0; i < 10000000; i++) {
      str += "text";
    }
    var d2 = new Date();
    console.log("加号连接时间:"
      + (d2.getTime() - d1.getTime()));//1271
  • 结果:1271ms
  1. StringBuffer实现连接
var buffer = new StringBuffer();
    d1 = new Date();
    for (var i=0; i < 10000000; i++) {
      buffer.append("text");
    }
    var result = buffer.toString();
    d2 = new Date();
    console.log("StringBuffer连接时间: "
      + (d2.getTime() - d1.getTime()));//862
  • 结果:862ms

总结

  1. 在数据量小的情况下建议使用“+”连接,方便快捷
  2. 对性能有很苛刻的情况下,或者数据量超级大时建议用Stringbuffer实现
JavaScript
知识点
  • 作者:零三(联系作者)
  • 最后更新时间:2020-04-03 13:30
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn