慎用javascript的字符串连接操作
2005-12-17  作者:amao  同分类文章
description:

在逛一个使用ajax的blog:x2blog发现一片不错的文章,转过来,高亮显示一个关键字的时候,先用php处理一下文本,然后使用javascript连接起来。
而且他写的那个测试代码也是非常有意思
onclick="eval(document.getElementById('txt1').value)"

一直觉得X2CodeLighter的性能不是很好,对较长的代码能感觉到明显的延时。于是今天和Bood一起研究这个问题,在推翻n个可能的性能瓶颈之后,我们将焦点集中在了字符串的连接上。在之前的做法中,每着色一个语法单位,都是用a+=b的形式将生成的html代码连到结果上,这样当需要着色的内容很长时,会变的很慢,而且消耗时间和循环长度并不是简单的线性关系,而是近似平方的关系。这让我们联想到在.net和java中对付这种问题都提供了一个类stringBuilder,来实现较多字符串连接的操作。于是我们用同样的思路,把Array对象当作stringBuilder来测试,发现果然性能有质的提高,具体测试情况可以使用下面提供的测试程序;你可以改变循环的次数和每次增加的字符串来看两者的性能差异。因而可见,javascript中实现字符串连接的操作和java,.net中是相似的,都是新建一块内存,把连接的两个字符串拷贝过去,即使只增加了一个字符。大家在实现自己代码时可以考虑一下这个做法,javascript被大量使用时,其性能还是很需要考虑的,嘿嘿
ps:在Firefox下没有该问题,两者性能相差不大;其它浏览器未测试。


使用普通连接操作耗时:


使用数组模拟stringBuilder耗时:



相关
各种颜色值
利用ajax判断web用户是否在线(离线)
鼠标滑过超链接自动点击代码
表单提交时自动复制内容到剪贴板
页面上所有的链接都在新窗口打开
几种典型配色方案
符合WEB标准的下拉菜单
把flyy.info的首页从做了一下
fckeditor用javascript创建(结合ajax)
当ajax遭遇系统错误: -1072896658