JS编程建议——36:警惕字符串连接操作(1)-阿里云开发者社区

开发者社区> 开发与运维> 正文

JS编程建议——36:警惕字符串连接操作(1)

简介: 36:警惕字符串连接操作(1)

建议36:警惕字符串连接操作(1)
字符串连接表现出惊人的“性能紧张”。一个任务通过一个循环向字符串末尾不断地添加内容,以创建一个字符串。例如,创建一个HTML 表或一个XML 文档。此类处理在一些浏览器上表现得非常糟糕。
当连接少量字符串时,这些问题都可以忽略,临时使用可选择最熟悉的操作。当合并字符串的长度和数量增加之后,有些函数开始显示出“威力”。
(1)+、+=
+、+=运算符提供了连接字符串的最简单方法。除IE 7及其以前版本外,当前所有浏览器都对这种方法优化得很好,因此不需要使用其他方法。当然,还可以提高这些操作的效率。例如,下面这行代码是字符串连接的常用方法:

  1. str += "one" + "two";
    JavaScript在执行这行代码时,会进行以下4个步骤:

第1步,在内存中创建一个临时字符串。
第2步,临时字符串的值被赋予“onetwo”。
第3步,临时字符串与str 的值进行连接。
第4步,把结果赋予str。
不过,通过下面代码进行优化能够提高执行效率:两个离散表达式直接将内容附加到str上,避免了临时字符串(第1 步和第2步)。在大多数浏览器中,这样做可以使执行速度提升10%~40%。

  1. str += "one";
  2. str += "two";
    实际上,也可以用以下一行代码实现同样的性能提升。
  3. strstr = str + "one" + "two";
    这就避免了使用临时字符串,因为赋值表达式开头以str 为基础,一次追加一个字符串,从左至右依次连接。如果改变连接顺序,如下所示:
  4. str = "one" + str + "two";
    就会失去这种优化性能。这与浏览器合并字符串时分配内存的方法有关。除IE以外,浏览器尝试扩展表达式左端字符串的内存,然后简单地将第二个字符串复制到它的尾部。在一个循环中,如果基本字符串位于最左端,就可以避免多次复制一个越来越大的基本字符串。

然而,上面的方法并不适用于IE。对于IE来说,这种优化几乎没有任何作用,在IE 8 上甚至比IE 7 和早期版本更慢,这与IE 执行连接操作的机制有关。
在IE 8 中,连接字符串只是记录下构成新字符串的各部分字符串的引用。在最后时刻,各部分字符串才被逐个复制到一个新的“真正的”字符串中,然后用它取代先前的字符串引用,因此并非每次使用字符串时都发生合并操作。
IE 7 和更早的浏览器在连接字符串时使用更糟糕的实现方法,每连接一对字符串都要将其复制到一块新分配的内存中。使用上述方法反而会使代码执行速度更慢,因为合并多个短字符串比连接一个大字符串更快,因此要避免多次复制那些大字符串。例如:

  1. largeStrlargeStr = largeStr + s1 + s2;
    在IE 7 和更早的版本中,必须将这个大字符串复制两次。首先与s1 合并,然后再与s2 合并。相反,对于下面代码:
  2. largeStr = s1 + s2;

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章