再论Javascript下字符串连接的性能


Posted in Javascript onMarch 05, 2011

1 如何进行字符串连接?

首先让我们来回顾一下字符串连接的两种常用方法:
1.1 使用字符串连接运算符

常用的语言(如Java、C#、PHP等)都有字符串连接运算符,Javascript也不例外,代码示例:

var str = ""; 
str = str + "a";

1.2 使用数组

在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串。而在Javascript中就出现了通过Array模拟StringBuilder的方案。

var str = []; 
for (var i = 0; i < 100; i++) { 
str[i] = "12345"; 
} 
str = str.join("");

2 测试

下面通过复制字符串的过程来测试两种方法的性能:
2.1 通过字符串连接运算符进行复制:
function copyByOperator(str, times) { 
var newStr = ""; 

for (var i = 0; i < times; i++) { 


newStr += str; 

} 

return newStr; 
}

2.2 通过数组进行复制:
function copyByArray(str, times) { 
var newStr = []; 

for (var i = 0; i < times; i++) { 


newStr[i] = str; 

} 

return newStr.join(""); 
}

str采用一段固定的HTML字符串,长度是61。
2.3 IE下的测试

考虑到IE的性能比较差,先用小的times值(6000)在IE 6、IE 7和IE 8下面测试。运行10次后取平均值,结果如下:
IE浏览器下的测试结果
浏览器 copyByOperator copyByArray
IE 6 1780.4ms 9.5ms
IE 7 1754.6ms 7.7ms
IE 8 1.6ms 9.4ms

IE6、7与IE8的测试结果相距甚远,很明显地,IE 8对字符串连接运算进行了优化,效率已经高于数组复制法

2.4 各种浏览器下的测试

下面再用比较大的times值(50000)对最新版本的各种浏览器进行测试。

各种浏览器的测试结果
浏览器 copyByOperator copyByArray
IE 8 21.8ms 54.7ms
Firefox 3.6 40.9ms 27.9ms
Chrome 4 4.4ms 10.9ms
Safari 4.0.5 41.6ms 34.6ms
Opera 10.50 33.1ms 23ms

这个结果真是出人意料。IE 8下的字符串连接运算竟然把Chrome以外的浏览器都打败了,那些老说IE性能低下的可要注意点了。而在Chrome下也出现了字符串连接运算比数组复制法高效的情况。

3 总结

浏览器的性能在不断地提高,作为前端工程师,也要适时调整Javascript程序的优化策略,以获得最佳的性能。

Javascript 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
详解AngularJS controller调用factory
May 19 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
再论Javascript的类继承
Mar 05 #Javascript
Array的push与unshift方法性能比较分析
Mar 05 #Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 #Javascript
判断用户是否在线的代码
Mar 05 #Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 #Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 #Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 #Javascript
You might like
PHP 中的类
2006/10/09 PHP
我的论坛源代码(二)
2006/10/09 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python实现ping命令小程序
2020/12/28 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
优秀员工自荐书
2013/12/19 职场文书
大学生村官任职感言
2014/01/09 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
心理学培训心得体会
2016/01/22 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python