再论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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue模块拖拽实现示例代码
Mar 09 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
JavaScript实现多球运动效果
Sep 07 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扩展程序实现守护进程
2015/04/16 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python、Javascript中的闭包比较
2015/02/04 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
Python帮你识破双11的套路
2019/11/11 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
sort命令的作用和用法
2013/08/25 面试题
光荣入党自我鉴定
2014/01/22 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
旅游文化节策划方案
2014/06/06 职场文书
远程培训的心得体会
2014/09/01 职场文书
2015年小学生暑假总结
2015/07/13 职场文书