`
独爱秋
  • 浏览: 12477 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
文章分类
社区版块
存档分类
最新评论

JavaScript字符串连接的性能问题

阅读更多
在Professional JavaScript for Web Developers(第二版)一书中,看到一个关于字符串操作的例子,原文大意如下:
var str = "hello ";
str += "world";

这段代码的实际执行有以下六步:
1. Create a string to store "hello ".
2. Create a string to store "world".
3. Create a string to store the result of concatenation.
4. Copy the current contents of str into the result.
5. Copy the "world" into the result.
6. Update str to point to the result.
第2到6步在每次字符串拼接的时候都发生,使这个操作很费时。当该操作进行成千上万次时,性能上会有问题。解决的办法是使用Array来存储string并使用join()方法来创建最后的string.可用以下代码替代:
var arr = new Array;
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");

使用上面的方法,无论有多少string,连接操作只发生一次:
1. Create a string to store the result.
2. Copy each string into the appropriate spot in the result.
但实际效果并非如此,可写一段测试代码:
function StringBuffer() {
this.__strings__ = new Array;
}
StringBuffer.prototype.append = function (str) {
this.__strings__.push(str);
};
StringBuffer.prototype.toString = function () {
return this.__strings__.join("");
};
var d1 = new Date();
var str = "";
for (var i=0; i < 10000000; i++) {
str += "text";
}
var d2 = new Date();
document.write("Concatenation with plus: " + (d2.getTime() - d1.getTime()) + "milliseconds");
var oBuffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000000; i++) {
oBuffer.append("text");
}
var sResult = oBuffer.toString();
d2 = new Date();
document.write("<br />Concatenation with StringBuffer: " + (d2.getTime() -
d1.getTime()) + " milliseconds");

最后,作者说,实际的情况是,使用“+”操作符,要比使用数组的方法节省100-200%的性能。
================================================================================
上面都是在这本书中写到的,我实际测试了下,在不同浏览器下有差异。
IE 9:
Concatenation with plus: 3036milliseconds
Concatenation with StringBuffer: 1210 milliseconds


Firefox 11.0
Concatenation with plus: 269milliseconds
Concatenation with StringBuffer: 3245 milliseconds


Chrome 18.0.1025.152 m
Concatenation with plus: 3081milliseconds
Concatenation with StringBuffer: 3455 milliseconds


可以看到,在IE9下,使用数组的方式效率反而更高,只有使用“+”操作符的40%,在FF下,使用“+”操作符交通大大优于数组方式,在Chrome下,两种方式差不多。
分享到:
评论

相关推荐

    javascript 字符串连接的性能问题(多浏览器)

    这里需要注意的是,最新版本的Firefox已经修复了字符串连接性能问题,而旧版本的Firefox(如1.0或之后的版本)可能比普通的字符串连接更慢。 根据这些实验结果,可以得出以下几点关于字符串连接性能的知识点: 1. ...

    你必须知道的JavaScript 中字符串连接的性能的一些问题

    在探讨JavaScript编程中,字符串连接是常见操作之一,但其性能问题往往会被人忽视。由于JavaScript的核心规范ECMAScript中字符串的不可变性,即字符串一旦创建,其内容就不能被改变,这意味着每次字符串连接操作实际...

    JavaScript 字符串连接性能优化

    标题提到的“JavaScript字符串连接性能优化”就是针对这一问题进行的探讨。 通常,我们使用`+`运算符或者`+=`来连接字符串,但这种方式在连续拼接大量字符串时效率低下。描述中提到,通过使用类似Java中的`...

    关于js中连接字符串效率的测试例子!

    在内部,JavaScript会创建新的字符串对象来存储连接结果,因此这种方式对于少量字符串连接效率尚可,但随着字符串数量增加,性能会下降,因为每次连接都会产生新的字符串对象。 2. 使用`Array.prototype.join()`:...

    再论Javascript下字符串连接的性能

    总的来说,理解JavaScript中字符串连接的性能差异是优化代码的关键。开发者需要定期关注浏览器的更新和性能改进,以便及时调整优化策略,确保代码在各种环境下都能达到最佳的执行效率。同时,对于特定场景,可能还...

    Javascript三种字符串连接方式及性能比较

    本文将详细介绍三种常见的JavaScript字符串连接方式,并通过实际性能测试来比较它们的效率。 首先,我们来介绍三种字符串连接方法: 1. 使用加号“+”连接符: 这是最直接也是最常用的字符串连接方式,通过使用...

    数组方法解决JS字符串连接性能问题有争议

    在JavaScript编程中,字符串连接(concatenation)一直是一个值得关注的性能问题,特别是在早期的浏览器环境中。传统的字符串连接方式,如使用加号`+`,在处理大量字符串时,其性能可能不尽人意。这是因为JavaScript...

    连接 字符 串.rar

    - **JavaScript**:JavaScript的`+`运算符同样适用于字符串连接,另外还有模板字符串(`模板字面量`)的方式,用反引号(``)包裹,支持嵌入表达式 `${}`。 - **C/C++**:C和C++中没有内置的字符串连接函数,通常...

    Strman一个Javascript字符串处理库

    Strman是一个专为JavaScript设计...总的来说,Strman是一个强大且全面的JavaScript字符串处理工具,它提供了一系列实用的函数,帮助开发者更高效地处理字符串任务,无论是前端开发还是Node.js后端开发,都能从中受益。

    测试JavaScript字符串处理性能的代码

    ### 标题:测试JavaScript字符串处理性能的代码 #### 知识点1:JavaScript 字符串操作 在JavaScript中处理字符串是一项常见的任务,它包括创建字符串、修改字符串、连接字符串等操作。字符串操作的性能对于那些对...

    js版字符串快速检索

    另外,合理使用字符串连接方法,如使用模板字符串`template literals`而非多次使用`+`操作符,可以提升性能。 8. **内存管理**:在处理大量字符串时,要注意内存使用,避免一次性加载过多数据。可以采用分块读取、...

    温故知新——JavaScript中的字符串连接问题最全总结(推荐)

    在JavaScript中,字符串连接是一个常见的操作,但在处理大量字符串连接时,性能问题就显得尤为重要。这是因为JavaScript中的字符串是不可变的,这意味着每次进行字符串连接,实际上都会创建一个新的字符串对象来存储...

    字符串拼接工具

    在编程中,字符串拼接通常是通过字符串连接运算符或者使用特定的函数来实现的。例如,在Python中,我们可以使用 "+" 运算符直接连接两个字符串;在JavaScript中,可以使用 "+" 或者模板字符串(`template literals`...

    javascript下高性能字符串连接StringBuffer类

    总之,字符串连接在JavaScript中的性能优化是一个值得关注的问题,特别是在处理大量数据时。使用StringBuffer类可以显著提高性能,减少不必要的资源消耗,这对于编写高效、优化的JavaScript代码至关重要。在实际开发...

    探讨js字符串数组拼接的性能问题

    总之,JavaScript中的字符串连接性能取决于多种因素,包括浏览器的实现、字符串的大小和数量。在实际开发中,应根据具体需求和目标用户群体选择合适的字符串连接策略,以达到性能与可读性的平衡。

    Go-stringish一组可链式字符串助手可减少操纵字符串的痛苦

    - `Join(strings []string)`:将多个字符串连接成一个。 - `Contains(substring)`:检查字符串是否包含特定子串。 - `StartsWith(prefix)` 和 `EndsWith(suffix)`:检查字符串是否以特定前缀或后缀开头或结束。 ...

    计算机软件-商业源码-14 连接字符串.zip

    在IT行业中,源码软件指的是可以查看和修改...通过理解这些基本概念和技术,开发者能够更有效地处理字符串连接,优化代码性能,从而提高软件的效率和用户体验。在分析和学习商业源码时,了解这些最佳实践是至关重要的。

Global site tag (gtag.js) - Google Analytics