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;
相关文章
|
3月前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
69 1
|
9天前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
37 13
|
2月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
|
2月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
35 2
|
2月前
|
前端开发 JavaScript 持续交付
提高JavaScript编程效率
提高JavaScript编程效率
36 3
|
2月前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
27 2
|
3月前
|
NoSQL 前端开发 JavaScript
Node.js 连接 MongoDB
10月更文挑战第20天
47 0
|
3月前
|
NoSQL 前端开发 JavaScript
Node.js 连接 MongoDB
10月更文挑战第9天
66 0
|
3月前
|
SQL JavaScript 关系型数据库
Node.js 连接 MySQL
10月更文挑战第9天
47 0