再论Javascript下字符串连接的性能_javascript技巧-js教程-PHP中文网

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

php中文网

发布： 2016-05-16 18:09:46

原创

1365人浏览过

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 　　str[i] = "12345"; 
} 
str = str.join(""); 

2 测试

下面通过复制字符串的过程来测试两种方法的性能：
2.1 通过字符串连接运算符进行复制：

复制代码代码如下:

 
function copyByOperator(str, times) { 
　　var newStr = ""; 
　　for (var i = 0; i 　　　　newStr += str; 
　　} 
　　return newStr; 
} 

2.2 通过数组进行复制：

复制代码代码如下:

 
function copyByArray(str, times) { 
　　var newStr = []; 
　　for (var i = 0; i 　　　　newStr[i] = str; 
　　} 
　　return newStr.join(""); 
} 

str采用一段固定的HTML字符串，长度是61。
2.3 IE下的测试

考虑到IE的性能比较差，先用小的times值（6000）在IE 6、IE 7和IE 8下面测试。运行10次后取平均值，结果如下：

IE6、7与IE8的测试结果相距甚远，很明显地，IE 8对字符串连接运算进行了优化，效率已经高于数组复制法。

下面再用比较大的times值（50000）对最新版本的各种浏览器进行测试。

这个结果真是出人意料。IE 8下的字符串连接运算竟然把Chrome以外的浏览器都打败了，那些老说IE性能低下的可要注意点了。而在Chrome下也出现了字符串连接运算比数组复制法高效的情况。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

浏览器的性能在不断地提高，作为前端工程师，也要适时调整Javascript程序的优化策略，以获得最佳的性能。

大家都在看：