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;
相关文章
|
2月前
|
JavaScript 前端开发 API
淘宝店铺阿里旺旺采集工具,连接批量转旺旺ID,用Js接口实现效果
以下是淘宝店铺阿里旺旺采集工具的JS实现代码,包含批量获取店铺旺旺ID功能,当然仅
|
5月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
115 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
6月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
7月前
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
615 2
|
8月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
136 13
|
10月前
|
前端开发 JavaScript 持续交付
提高JavaScript编程效率
提高JavaScript编程效率
103 3
|
10月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
81 2
|
10月前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
编解码 JavaScript 前端开发
盘点JavaScript中那些进阶操作知识(下篇)
盘点JavaScript中那些进阶操作知识(下篇)
211 0
|
编解码 JavaScript 前端开发
盘点JavaScript中那些进阶操作知识(上篇)
盘点JavaScript中那些进阶操作知识(上篇)
198 0