Heim  >  Artikel  >  Web-Frontend  >  再论Javascript下字符串连接的性能_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 18:09:461140Durchsuche

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次后取平均值,结果如下:
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程序的优化策略,以获得最佳的性能。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn