- 浏览: 165859 次
- 性别:
- 来自: 天津
文章分类
最新评论
在W3SCHOOL中有讨论js字符串连接方法性能对比的篇章如下:
对象令人感兴趣的一点是用它们解决问题的方式。ECMAScript 中最常见的一个问题是字符串连接的性能。与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变。请考虑下面的代码:
var str = "hello "; str += "world";
实际上,这段代码在幕后执行的步骤如下:
- 创建存储 "hello " 的字符串。
- 创建存储 "world" 的字符串。
- 创建存储连接结果的字符串。
- 把 str 的当前内容复制到结果中。
- 把 "world" 复制到结果中。
- 更新 str,使它指向结果。
每次完成字符串连接都会执行步骤 2 到 6,使得这种操作非常消耗资源。如果重复这一过程几百次,甚至几千次,就会造成性能问题。解决方法是用 Array 对象存储字符串,然后用 join() 方法(参数是空字符串)创建最后的字符串。想象用下面的代码代替前面的代码:
var arr = new Array(); arr[0] = "hello "; arr[1] = "world"; var str = arr.join("");
这样,无论数组中引入多少字符串都不成问题,因为只在调用 join() 方法时才会发生连接操作。此时,执行的步骤如下:
- 创建存储结果的字符串
- 把每个字符串复制到结果中的合适位置
虽然这种解决方案很好,但还有更好的方法。问题是,这段代码不能确切反映出它的意图。要使它更容易理解,可以用 StringBuffer 类打包该功能:
function StringBuffer () { this._strings_ = new Array(); } StringBuffer.prototype.append = function(str) { this._strings_.push(str); }; StringBuffer.prototype.toString = function() { return this._strings_.join(""); };
这段代码首先要注意的是 strings 属性,本意是私有属性。它只有两个方法,即 append() 和 toString() 方法。append() 方法有一个参数,它把该参数附加到字符串数组中,toString() 方法调用数组的 join 方法,返回真正连接成的字符串。要用 StringBuffer 对象连接一组字符串,可以用下面的代码:
var buffer = new StringBuffer (); buffer.append("hello "); buffer.append("world"); var result = buffer.toString();可用下面的代码测试 StringBuffer 对象和传统的字符串连接方法的性能:
var d1 = new Date(); var str = ""; for (var i=0; i < 10000; i++) { str += "text"; } var d2 = new Date(); document.write("Concatenation with plus: " + (d2.getTime() - d1.getTime()) + " milliseconds"); var buffer = new StringBuffer(); d1 = new Date(); for (var i=0; i < 10000; i++) { buffer.append("text"); } var result = buffer.toString(); d2 = new Date(); document.write("<br />Concatenation with StringBuffer: " + (d2.getTime() - d1.getTime()) + " milliseconds");这段代码对字符串连接进行两个测试,第一个使用加号,第二个使用 StringBuffer 类。每个操作都连接 10000 个字符串。日期值 d1 和 d2 用于判断完成操作需要的时间。请注意,创建 Date 对象时,如果没有参数,赋予对象的是当前的日期和时间。要计算连接操作历经多少时间,把日期的毫秒表示(用 getTime() 方法的返回值)相减即可。这是衡量 JavaScript 性能的常见方法。该测试的结果应该说明使用 StringBuffer 类比使用加号节省了 50% - 66% 的时间。
自己在本地的IE8中做了实验,平均十次取均值的结果是
Concatenation with plus: 23.5 milliseconds
Concatenation with StringBuffer: 42 milliseconds
将循环次数增加10倍,结果是
Concatenation with plus: 145.5 milliseconds
Concatenation with StringBuffer: 282.8 milliseconds
看起来好像是IE8早就将字符串+操作进行了优化,性能远远高于数组操作了,可是这里是将数组操作封装在一个自定义的StringBuffer 类里,通过调用它的函数来做连接操作,那么,直接用数组的操作结果如何呢?直接将以上代码稍作修改:
var buffer = new Array();
d1 = new Date();
for (var i=0; i < 10000; i++) {
buffer[i]="text";
}
var result = buffer.join("");
d2 = new Date();
document.write("<br />Concatenation with StringBuffer: "
+ (d2.getTime() - d1.getTime()) + " milliseconds");
结果如下:
Concatenation with plus: 23.4 milliseconds
Concatenation with StringBuffer: 17.3milliseconds
将循环次数增加10倍,结果是
Concatenation with plus: 126.4milliseconds
Concatenation with StringBuffer: 98.5 milliseconds
从上面的结果可以看到,IE8调优的结果似乎还是没有直接使用数组来得快,看来调用函数所消耗的性能也不容小觑,另外,从这个例子中我们可以看到,真正要对某些操作进行调优时,必须实际试验过才行,书本的知识总是过时的。
在做这个实验的过程中,还在网上查找了相关文章,Heero的“再论Javascript下字符串连接的性能”里,描述了在IE多个版本的浏览器以及别的浏览器中做的实验结果,也充分说明了“浏览器的性能在不断地提高,作为前端工程师,也要适时调整Javascript程序的优化策略,以获得最佳的性能。”
发表评论
-
ajax下载文档 ClientAbortException: java.net.SocketException: Connection reset by pee
2013-08-28 13:58 2256众所周知ajax是使用了浏览器内部的XmlHttpRequ ... -
在js里引用另一个js文件
2013-08-28 10:58 791new_element=document.createE ... -
<转> js替换字符正则表达式
2013-08-16 14:28 778function replace() { var str ... -
<转> JQuery选择器
2013-08-16 10:24 826<html> <head> &l ... -
jQuery获取Select选择的Text和 Value(转)
2013-08-13 09:47 555jQuery获取Select选择的Text和Valu ... -
<转>javascript获取地址栏参数
2013-08-12 10:03 657function GetQueryString(name){v ... -
iframe子页面内刷新同页面中另一个iframe
2013-08-09 15:25 10511框架页面如下: <div id="a ... -
jquery动态修改链接的onclick方法
2013-08-07 11:29 2285用jquery动态修改链接的onclick方法的传递参数,在 ... -
《转》JS怎么刷新当前页面
2013-04-15 13:17 815reload 方法,该方法强迫 ... -
<转>iframe去掉横向滚动条
2012-05-15 14:45 1200如题,就是在网页中, ... -
ie onmouseup和onclick事件执行顺序
2012-05-14 17:21 1116今天项目要做个类似网 ... -
iframe同步刷新时好时坏问题
2012-04-19 17:04 1192页面由左右两个iframe组成,要求右面内容更新时(内容跟左面 ... -
js浮动效果
2012-02-14 17:29 982项目中某页面需要固定某个div内容,实际需求是这样的,有个评分 ... -
js判断页面关闭 仅支持IE6
2012-02-08 16:38 1618关闭页面时同时执行onbeforeunload和onunloa ... -
onpropertychange与输入法有关
2012-02-03 14:56 1157页面输入框经常有只允许输入数字的限制,一般都用onproper ... -
<转>name和function名字不能相同
2012-01-05 16:40 0今天突然碰到form表单的名字与js方法的名字相同导致找不到j ... -
onmousedown、onmouseup和onclick的奇怪问题
2011-07-08 10:04 2214将setTimeout的时间设置为0,告诉浏览器当它为当前任何 ... -
超链接<a>中属性href与target相冲突的地方
2011-03-25 11:47 1879今天在项目中写了两行代码,出现不同的效果: ①<a h ... -
<转>键盘回车事件导致页面刷新的问题
2011-03-24 11:18 849我最近在做一个 Ajax 查询的功能,代码如下: ... -
使用prototype的有用小方法
2010-09-13 15:33 904今天刚刚接触js中对象 ...
相关推荐
1、传统上,字符串连接一直是js中性能最低的操作之一。 var text=”Hello”; text+=” World!”; 早期浏览器没有对这种运算进行优化。 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。频繁地在...
每拼接一次字符串就循环重复2)~6),如果重复成百上千次则会非常消耗资源,影响性能。 解决方法: 使用 Array 对象存储字符串,之后使用 join()方法输出结果。 仿照 Java 中的 StringBuffer 类。
1.2 使用数组 在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串。而在Javascript中就出现了通过Array模拟StringBuilder的方案。 ...
今天看了javascript 高级程序设计谈到了字符串连接的性能问题
我们知道,在js中,字符串连接是性能最低的操作之一。 例如: 代码如下: var text=”Hello”; text+=” World!”; 早期浏览器没有对这种运算进行优化。 由于字符串是不可变的,这意味着要创建中间字符串来存储...
主要介绍了Javascript三种字符串连接方式及性能比较,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
每种程序语言中都会涉及到字符窜连接,而这个小小的字符窜连接问题很可能会影响到系统的整体性能,本文主要探讨JavaScript中字符串连接的性能问题
主要介绍了JS中的字符串连接问题,ECMAScript 中最常见的一个问题是字符串连接的性能。在调用 join() 方法时才会发生连接操作,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
执行的步骤如下: 创建存储“Hello“的字符串 创建存储”world“的字符串 创建存储连接结果的字符串 把str的当前内容复制到结果中 把“world”复制到结果中 更新str,使它指向结果 每次完成字符串的连接都会执行...
下面小编就为大家带来一篇浅谈JS中的三种字符串连接方式及其性能比较。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
使用低端台式机和1MB字符串进行的近似测量:3-14MB / s压缩,20-120MB / s解压缩(详细基准以及与其他Javascript库的比较可以在找到)。 由于专注于时间效率,因此与LZW +熵编码等尺寸更高效的算法相比,压缩率会...