前几天还在忙着折腾我自己的StuffyJS,没想到前天就突然折腾到JS模板引擎上了#(汗),看样子三分钟热度的习惯还没改掉啊……

印象里记得高级语言(尤其是面向对象的语言)中字符串是不能更改的,所以在我自己的模板引擎优化里遇到了+=运算符和Array.join哪个效率更好一些的问题。

代码如下:

function f1() {
  var buf = [];
  for (...) {
    buf.push(ch);
  }
  return buf.join("");
}

function f2() {
  var buf = "";
  for (...) {
    buf += ch;
  }
  return buf;
}

因为上上……一篇的博客里提到的PC原因,所以没办法测试,我这里直接引用了别人的测试数据了:

测试结论:在小数据量的字符串接连操作时,”+=”和”array.join”的性能相差无几(chrome或firefox),可以随意使用哪一种方式,但是在操作大数据量的字符串连接时(>= 10000),使用”array.join”的性能优势遍体现出来了。 特别说明,在IE下面,最好使用 “array.join”的方式来拼接字符串。。

由此可见在JS中字符串连接时使用Array.join比使用+=的性能更好。原因是因为大多数高级语言中的字符串无法更改,所以+=运算符首先会拷贝原有的字符用以生成新的字符串,而当字符串越来越大时拷贝这个过程反而成了累赘。

这时插入字符串就需要用到StringBuilder类似的解决方法将字符串拆散成字符数组再添加,省去复制旧字符串的操作。然后再交由原生方法Array.join组合字符串,以此达到提升效率的目的。

相关知识点:

结语:

这篇博客是我在研究ejs模板引擎的时候写的,当然ejs作者(node版本的)并没有使用Array.join版本的实现,而是直接使用了+=。我在自己照猫画虎(确切的说是部分参考了ejs)的ijktpl.js项目中则使用了这种方法,不过目前分支语句还没实现:(

参考与引用: