Javascript 字符串连接的性能探讨

前端之家收集整理的这篇文章主要介绍了Javascript 字符串连接的性能探讨前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是个老话题了,之所以再拿出来说,是因为浏览器一直在进步,以前最好的方法现在不一定是最好的。

1 如何进行字符串连接?

首先让我们来回顾一下字符串连接的两种常用方法

1.1 使用字符串连接运算符

常用的语言(如Java、C#、PHP等)都有字符串连接运算符,Javascript也不例外,代码示例:
var str = "";
str = str + "a";
1.2 使用数组

在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串。而在Javascript中就出现了通过Array模拟StringBuilder的方案。
  1. var str = [];
  2. for (var i = 0; i < 100; i++) {
  3.   str[i] = "12345";
  4. }
  5. str = str.join("");

2 测试

下面通过复制字符串的过程来测试两种方法性能

2.1 通过字符串连接运算符进行复制:
  1. function copyByOperator(str,times) {
  2.   var newStr = "";
  3.   for (var i = 0; i < times; i++) {
  4.     newStr += str;
  5.   }
  6.   return newStr;
  7. }
2.2 通过数组进行复制:
  1. function copyByArray(str,times) {
  2.   var newStr = [];
  3.   for (var i = 0; i < times; i++) {
  4.     newStr[i] = str;
  5.   }
  6.   return newStr.join("");
  7. }
str采用一段固定的HTML字符串,长度是61。

2.3 IE下的测试

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

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

2.4 各种浏览器下的测试

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

Javascript下字符串连接的性能

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

3 总结

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

猜你在找的JavaScript相关文章