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


Posted in Javascript onOctober 11, 2014

我们知道,在js中,字符串连接是性能最低的操作之一。
例如:

var text="Hello";  

text+=" World!"; 

早期浏览器没有对这种运算进行优化。
由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。频繁地在后台创建和销毁字符串导制性能异常低下。

因此,可以利用数组对象进行优化。
例如:

var buffer=[],i=0; 
buffer[i++]="Hello";  //通过相应索引值添加元素比push方法快 
buffer[i++]=" World!"; 
var text=buffer.join("");

在早期的浏览器中,没有创建和销毁中间字符串,在大量字符串连接情况下,这技术已被证明远快于使用加法方式。
 
如今浏览器对字符串的优化已经改变了字符串相连的局面。Safari、Opera、Chrome、Firefox和IE8都在使用加法运算符上表现出了更好的性能。但是,IE8之前的版本没有优化,因此数组方法依然有效。这并不意味着字符串相连时我们要进行浏览器检测。在决定如何连接时要考虑的是字符串的大小和数量。

当字符串相对较小(小于20字符)且连接数量也较小时(小于1000个),所有的浏览器使用加法运算符都能在不到1毫秒内轻松完成连接。增加字符串数量或大小时,IE7中性能会明显下降。字符串大小增加时,Firefox中加法运算符和数组成技巧性能差异会变小。字符串数量增加时,Safari中加法运算符和数组成技巧性能差异会变小。改变字符串数量或大小时,Chrome和Opera中加法运算符一直保持领先优势。

所以,由于在各浏览器下性能不一致,选用技术取决于实际情况和面对的浏览器。

大多数情况下,加法运算符是首选;如果用户主要使用IE6或7,并且字符串大小较大或数量较多时,那么数组技术就很值得。
 
一般情况下,如果是语义性的字符串,不应该使用Array,比如:
'Hello, my name is ' + name; 
 
如果字符串是"相似情况的重复"的话,建议使用Array,比如:

var array = []; 
for (i = 0; i < length; i++) { 
array[i] = '<li>' + list[i] + '</li'>; 
} 
document.getElementById('somewhere').innerHTML = array.join('\n');

有关js字符串数组连接的性能比较,就介绍到这里了,希望对大家有所帮助。

Javascript 相关文章推荐
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 #Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 #Javascript
js点击button按钮跳转到另一个新页面
Oct 10 #Javascript
jQuery获取iframe的document对象的方法
Oct 10 #Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 #Javascript
一个js过滤空格的小函数
Oct 10 #Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 #Javascript
You might like
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php flv视频时间获取函数
2010/06/29 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
PHP多进程编程实例详解
2017/07/19 PHP
php读取本地json文件的实例
2018/03/07 PHP
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
基于Python的PIL库学习详解
2019/05/10 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python安装后的目录在哪里
2020/06/21 Python
Python 使用office365邮箱的示例
2020/10/29 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
车间班组长岗位职责
2013/11/13 职场文书
财务内勤岗位职责
2014/04/17 职场文书
考博专家推荐信
2014/05/10 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
三峡大坝导游词
2015/01/31 职场文书
2015国庆节感想
2015/08/04 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
导游词之山东红叶谷
2019/10/31 职场文书