JavaScript组合拼接字符串的效率对比测试_javascript技巧
字符串的拼接在我们写代码的时候都是用“+=”这个运算符,s += String; 这是我们最为熟知的写法,不知道大家有没有注意过没有,在组合的字符串容量有几十K甚至几百K的时候,脚本执行起来很慢,CPU使用率狂高,例如:
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
var result = "";
for(var i=0; i
就这么一步操作,产生的结果字符串是200K,耗时是1.1秒(这个与电脑配置有关),CPU的峰值100%。(为了更直观地看到效果,我多做了些循环)。可想而知就这么一步操作就消耗了我一秒多的时间,再加上其它的代码的时间消耗,那整个脚本块的执行时间就难以忍受了。那有没有优化的方案呢?还有其它的方法吗?答案当然是有的,否则我写这篇文章就是废话。
更快的方式就是使用数组,在循环拼接的时候不是相接拼接到某个字符串里去,而是把字符串放到一个数组里,最后用数组.join("") 得到结果字符串,代码示例:
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789/n";
var result = "", a = new Array();
for(var i=0; i result = a.join(""); a = null;
大家可以测试测试,组合出一个相同大小的字符串所消耗的时间,我这里测试出来的结果是:
字符串拼接次数
最后我再说几句,是不是以后字符串拼接就一律使用数组join呢?这个要看你的实际需求了,就普通的几个或者K级的字节的组合就没有必要使用数组法了,因为开数组变量也是有消耗的。若有几K以上的字符串组合,那就是数组的效率高了。
IE 6.0:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 22089毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 218毫秒!
Firefox 1.0:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 1044毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 1044毫秒!
Mozilla 1.7:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 1045毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 1044毫秒!
Netscape 7.0:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 10273毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 1138毫秒!
Opera 7.54:
字符串拼接法:拼接后的大字符串长 1010000字节,拼接耗时 6968毫秒!
数组赋值join法:拼接后的大字符串长 1010000字节,拼接耗时 6922毫秒!
循环10000次的测试结果表明在IE和Netscape里可以大大提高效率,而在Firefox Mozilla Opera 里两种方法耗时基本相近,这些数据足可以判定数组join法优于传统字符串拼接。
推荐阅读
-
html数组字符串拼接的最快方法_javascript技巧
-
JavaScript中全局变量、函数内变量以及常量表达式的效率测试_javascript技巧
-
JS下高效拼装字符串的几种方法比较与测试代码_javascript技巧
-
js随机生成字母数字组合的字符串 随机动画数字_javascript技巧
-
Javascript中拼接大量字符串的方法_javascript技巧
-
JS下高效拼装字符串的几种方法比较与测试代码_javascript技巧
-
javascript中拼接HTML字符串的最快、最好的方法_javascript技巧
-
探讨js字符串数组拼接的性能问题_javascript技巧
-
JS实现的用来对比两个用指定分隔符分割的字符串是否相同_javascript技巧
-
javascript中字符串拼接需注意的问题_javascript技巧