再论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获取dom的下一个节点方法
Sep 05 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
jQuery设计思想
Mar 07 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
使用JS动态显示文本
Sep 09 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
Javascript confirm多种使用方法解析
Sep 25 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网页标题中文乱码的有效解决方法
2014/03/05 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php抽象类用法实例分析
2015/07/07 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python