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


Posted in Javascript onMay 07, 2013

而JavaScript的核心是ECMAScript 。与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变。

请考虑下面的代码:

var str = "hello ";
str += "world";实际上,这段代码在幕后执行的步骤如下:

1.创建存储 "hello " 的字符串。
2.创建存储 "world" 的字符串。
3.创建存储连接结果的字符串。
4.把 str 的当前内容复制到结果中。
5.把 "world" 复制到结果中。
6.更新 str,使它指向结果。

每次完成字符串连接都会执行步骤 2 到 6,使得这种操作非常消耗资源。如果重复这一过程几百次,甚至几千次,就会造成性能问题。解决方法是用 Array 对象存储字符串,然后用 join() 方法(参数是空字符串)创建最后的字符串。想象用下面的代码代替前面的代码:

var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");

这样,无论数组中引入多少字符串都不成问题,因为只在调用 join() 方法时才会发生连接操作。此时,执行的步骤如下:

1.创建存储结果的字符串
2.把每个字符串复制到结果中的合适位置
虽然这种解决方案很好,但还有更好的方法。问题是,这段代码不能确切反映出它的意图。要使它更容易理解,可以用 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 对象和传统的字符串连接方法的性能,在chrome控制台输入一下代码并运行:
var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
    str += "text";
}
var d2 = new Date();
console.log("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();
console.log("Concatenation with StringBuffer: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

这段代码对字符串连接进行两个测试,第一个使用加号,第二个使用 StringBuffer 类。每个操作都连接 10000 个字符串。日期值 d1 和 d2 用于判断完成操作需要的时间。请注意,创建 Date 对象时,如果没有参数,赋予对象的是当前的日期和时间。要计算连接操作历经多少时间,把日期的毫秒表示(用 getTime() 方法的返回值)相减即可。这是衡量 JavaScript 性能的常见方法。该测试的结果可以帮助您比较使用 StringBuffer 类与使用加号的效率差异。

上例运行结果如下:

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

那么有人也许会说JavaScript的String对象中不是也封装一个concat()方法么,我们在下面也来用concat()方法来做同样的事情,在consoel输入以下代码:

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
    str.concat("text");
}
var d2 = new Date();
console.log("Concatenation with plus: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

我们可以看到做10000次字符窜连接它的耗时是:

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

由此可以得出结论,当涉及到一定数量的字符串连接时,我们在Javascript中封装一个类似Java中的StringBuffer对象(函数)来进行操作会在性能上得到提升。

Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
js中的this关键字详解
Sep 25 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 #Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 #Javascript
JS中的substring和substr函数的区别说明
May 07 #Javascript
js图片自动切换效果处理代码
May 07 #Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 #Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 #Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 #Javascript
You might like
聊天室php&amp;mysql(四)
2006/10/09 PHP
对javascript和select部件的结合运用
2006/10/09 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
Python中属性和描述符的正确使用
2016/08/23 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
教师四风对照检查材料思想汇报
2014/09/17 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
助学金感谢信
2015/01/20 职场文书
婚庆答谢词大全
2015/09/29 职场文书
市级三好生竞选稿
2015/11/21 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL