再论Javascript下字符串连接的性能
作者:heero 来源:heero博客 发布时间:2010-06-26 13:13:00
这是个老话题了,之所以再拿出来说,是因为浏览器一直在进步,以前最好的方法现在不一定是最好的。
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次后取平均值,结果如下:
浏览器 | 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程序的优化策略,以获得最佳的性能。
猜你喜欢
- 系列目录:1. 服务器XMLHTTP(Server XMLHTTP in ASP)基础2. 
- 前几天帮人调试一个ASP+SQL2000+IIS5.1/6.0的网站程序,调试过程中遇到的问题如下:一、 SQLServer登录 原先存在备
- asp+js做的一个dig程序中的投票(有的叫顶一下,踩一下),由于代码较长,只贴出核心部分:投票中的代码相关文章推荐:ajax +asp
- 很多人一直都有个想法,要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include
- 是否看见大站的广告都是放在内容中间实现文字环绕的呢,一般普通小站广告只能放在内容开头或者结尾,也许大站的cms系统带这个功能吧,我们小站常用
- 一直很想就搜索结果页写一些心得文章出来,甚至连目录都整理好了可是就是一直没有动手。因为总是觉得还差很多东西需要研究需要分析需要验证。最近也组
- 语法结构: 1. Cast 语法结构:CAST ( expression AS data_type [ ( length ) ] ) 2.
- 1.INPUT和图片按钮对齐:<form method="post" action="
- 三天前,你说下面的图是 PS 的,我信。而今天,这的的确确是张截图 -- 是的,这已经 不是梦想,是现实 -- 但实现梦想的不是微软,是 G
- 随着jQuery、Mootools、prototype等知名的JavaScript框架的应用变的越来越强大,浏览器对最新版本CSS属性的支持
- 人们对于产品设计这类事情,往往容易眼高手低,在宇宙层面上夸夸其谈,却落不了地,只能飘着。真正到了自己动手的时候,才会发现问题很多,实践和理论
- <script language="vbscript" runat="s
- 在SQL Server 2005中,它的另外一个强大的新特点是数据库快照。数据库快照是一个数据库的只读副本,它是数据库所有数据的映射,由快照
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到,但它的输
- 对方用<script language="javascript"> var location="&
- ChatGPT 是 OpenAI 开发的 GPT(Generative Pre-trained Transformer)语言模型的变体。它是
- 如何制作一个小巧的购物车?主程序如下:cartkit.aspClass CartKitSub CreateCart()&
- 从今天开始起,基督山将和大家一起进入ASP.net 诸多程序的学习中,老实说,.net到底是法宝还是垃圾,我们拭目以待。有任何问题,联络基督
- 如何用HtmlEncode来显示Unicode? 见下:<%@ Language=VBS
- <% a="福建是中国的一个省|我们美丽中国的武夷山!" b="中国,我们,武夷山,福建,美国,苹果&q