探讨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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
分享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
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP中PDO的错误处理
2011/09/04 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python输入多行字符串的方法总结
2019/07/02 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
《威尼斯的小艇》教学反思
2014/02/17 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
决心书范文
2014/03/11 职场文书
质量承诺书范文
2014/03/27 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
师德标兵事迹材料
2014/12/19 职场文书
会议通知格式范文
2015/04/15 职场文书
公司财务管理制度
2015/08/04 职场文书
怎样写工作总结啊!
2019/06/18 职场文书