源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-11-17 23:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:再论Javascript下字符串连接的性能
[b]1 如何进行字符串连接?[/b] 首先让我们来回顾一下字符串连接的两种常用方法: [b]1.1 使用字符串连接运算符 [/b] 常用的语言(如Java、C#、PHP等)都有字符串连接运算符,Javascript也不例外,代码示例:
[u]复制代码[/u] 代码如下:
var str = ""; str = str + "a";
[b]1.2 使用数组[/b] 在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串。而在Javascript中就出现了通过Array模拟StringBuilder的方案。
[u]复制代码[/u] 代码如下:
var str = []; for (var i = 0; i < 100; i++) {   str[i] = "12345"; } str = str.join("");
[b]2 测试 [/b] 下面通过复制字符串的过程来测试两种方法的性能: [b]2.1 通过字符串连接运算符进行复制:[/b]
[u]复制代码[/u] 代码如下:
function copyByOperator(str, times) {   var newStr = "";   for (var i = 0; i < times; i++) {     newStr += str;   }   return newStr; }
[b]2.2 通过数组进行复制:[/b]
[u]复制代码[/u] 代码如下:
function copyByArray(str, times) {   var newStr = [];   for (var i = 0; i < times; i++) {     newStr[i] = str;   }   return newStr.join(""); }
str采用一段固定的HTML字符串,长度是61。 [b]2.3 IE下的测试 [/b] 考虑到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的测试结果相距甚远,很明显地,[b]IE 8对字符串连接运算进行了优化,效率已经高于数组复制法[/b]。 [h3]2.4 各种浏览器下的测试[/h3] 下面再用比较大的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下也出现了字符串连接运算比数组复制法高效的情况。 [h2]3 总结[/h2] 浏览器的性能在不断地提高,作为前端工程师,也要适时调整Javascript程序的优化策略,以获得最佳的性能。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部