谈JavaScript组合拼接字符串的效率
创始人
2024-08-03 05:51:30
0

JavaScript组合拼接字符串的效率。在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出。比如写脚本控件时控制整个控件的外观的HTML标签输出,比如AJAX里得到服务器端的回传值后动态分析创建HTML标签时,不过这里我就不讨论拼接字符串的具体应用了,我只是想在这里讨论一下拼接的效率。

字符串的拼接在我们写代码的时候都是用“+=”这个运算符,s += String; 这是我们最为熟知的写法,不知道大家有没有注意过没有,在组合的字符串容量有几十K甚至几百K的时候,脚本执行起来很慢,CPU使用率狂高,例如:

  1. var str = "01234567891123456789212345678931234567894123456789";  
  2. str+= "51234567896123456789712345678981234567899123456789/n";  
  3. var result = "";  
  4. for(var i=0; i<2000; i++) result += str; 

就这么一步操作,产生的结果字符串是200K,耗时是1.1秒(这个与电脑配置有关),CPU的峰值100%。(为了更直观地看到效果,我多做了些循环)。可想而知就这么一步操作就消耗了我一秒多的时间,再加上其它的代码的时间消耗,那整个脚本块的执行时间就难以忍受了。那有没有优化的方案呢?还有其它的方法吗?答案当然是有的,否则我写这篇文章就是废话。

更快的方式就是使用数组,在循环拼接的时候不是相接拼接到某个字符串里去,而是把字符串放到一个数组里,***用数组.join("") 得到结果字符串,代码示例:

  1. var str = "01234567891123456789212345678931234567894123456789";  
  2. str+= "51234567896123456789712345678981234567899123456789/n";  
  3. var result = "", a = new Array();  
  4. for(var i=0; i<2000; i++) a[i] = str;  
  5. result = a.join(""); a = null; 

大家可以测试测试,组合出一个相同大小的字符串所消耗的时间,我这里测试出来的结果是:<15毫秒,请注意,它的单位是毫秒,也就是说组合出这么一个200K的字符串,两种模式的时间消耗是差不多两个数量级。这意味着什么?意味着后者已经工作结束吃完中饭回来,前者还在做着苦力。我写一个测试页面,大家可以把下面这些代码拷贝下来另存为一个HTM文件在网页里打开自己来测试一下两者之间的效率差,反正我测试的是前者要半分钟才能完成的事,后者0.07秒就搞定了(循环10000次)。

  1.  
  2. 字符串拼接次数  
  3.  

  4.  
  5.  
 
  •  
  •  
  •  
  •  
  •  
  •  
  • ***我再说几句,是不是以后字符串拼接就一律使用数组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法优于传统字符串拼接。

    希望通过本文对JavaScript组合拼接字符串的效率的介绍,能够给你带来帮助。

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
    为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...