再论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 相关文章推荐
jQuery filter函数使用方法
May 19 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
清除输入框内的空格
Dec 21 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
vue debug 二种方法
Sep 16 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
再论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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
类的另类用法--数据的封装
2006/10/09 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python基于win32api实现键盘输入
2020/12/09 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
服务员岗位职责
2014/01/29 职场文书
教师个人鉴定材料
2014/02/08 职场文书
环保倡议书400字
2014/05/15 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL