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


Posted in Javascript onJanuary 12, 2011

1、传统上,字符串连接一直是js中性能最低的操作之一。
var text="Hello";
text+=" World!";
早期浏览器没有对这种运算进行优化。
由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。频繁地在后台创建和销毁字符串导制性能异常低下。
2、发现这一点后,开发者们利用数组对象进行优化。
var buffer=[],i=0;
buffer[i++]="Hello";//通过相应索引值添加元素比push方法快
buffer[i++]=" World!";
var text=buffer.join("");
在早期的浏览器中,没有创建和销毁中间字符串,在大量字符串连接情况下,这技术已被证明远快于使用加法方式。
3、如今浏览器对字符串的优化已经改变了字符串相连的局面。
Safari、Opera、Chrome、Firefox和IE8都在使用加法运算符上表现出了更好的性能。但是,IE8之前的版本没有优化,因此数组方法依然有效。
这并不意味着字符串相连时我们要进行浏览器检测。在决定如何连接时要考虑的是字符串的大小和数量。
1)当字符串相对较小(<20字符)且连接数量也较小时(<1000个),所有的浏览器使用加法运算符都能在不到1豪秒内轻松完成连接。
2)增加字符串数量或大小时,IE7中性能会明显下降。
3)字符串大小增加时,Firefox中加法运算符和数组成技巧性能差异会变小。
4)字符串数量增加时,Safari中加法运算符和数组成技巧性能差异会变小。
5)改变字符串数量或大小时,Chrome和Opera中加法运算符一直保持领先优势。
所以,由于在各浏览器下性能不一致,选用技术取决于实际情况和面对的浏览器。
大多数情况下,加法运算符是首选;如果用户主要使用IE6或7,并且字符串大小较大或数量较多时,那么数组技术就很值得。

Javascript 相关文章推荐
Javascript的匿名函数小结
Dec 31 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
深入分析javascript中console命令
Aug 14 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
js对数字的格式化使用说明
Jan 12 #Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 #Javascript
克隆javascript对象的三个方法小结
Jan 12 #Javascript
JavaScript中两种链式调用实现代码
Jan 12 #Javascript
Chrome中JSON.parse的特殊实现
Jan 12 #Javascript
js中将字符串转换成json的三种方式
Jan 12 #Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 #Javascript
You might like
PHP实时显示输出
2008/10/02 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
JavaScript OOP类与继承
2009/11/15 Javascript
JS 控件事件小结
2012/10/31 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
js转换对象为xml
2017/02/17 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
python实现清屏的方法
2015/04/30 Python
python实现感知器算法(批处理)
2019/01/18 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
C语言编程练习
2012/04/02 面试题
办护照工作证明
2014/10/01 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
保留意见审计报告
2015/06/05 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js