首页 / JAVASCRIPT / 再论Javascript下字符串连接的性能_javascript技巧

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了再论Javascript下字符串连接的性能_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1854字，纯文字阅读大概需要3分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的再论Javascript下字符串连接的性能_javascript技巧全部内容，希望文章能够帮你解决再论Javascript下字符串连接的性能_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/313556.html

来源：【匿名】