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

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程序的优化策略，以获得最佳的性能。

　　推荐阅读

　　js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/ <!DOCTYPE html PUBLIC ">>>详细阅读

本文标题：再论Javascript下字符串连接的性能

地址：http://www.17bianji.com/kaifa2/JS/24826.html

1/2 1