JavaScript组合拼接字符串的效率对比测试


Posted in Javascript onNovember 06, 2014

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

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

    var str = "01234567891123456789212345678931234567894123456789";

        str+= "51234567896123456789712345678981234567899123456789/n";

    var result = "";

    for(var i=0; i<2000; i++) result += str;

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

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

    var str = "01234567891123456789212345678931234567894123456789";

        str+= "51234567896123456789712345678981234567899123456789/n";

    var result = "", a = new Array();

    for(var i=0; i<2000; i++) a[i] = str;

    result = a.join(""); a = null;

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

<body>

字符串拼接次数<input id="totle" value="1000" size="5" maxlength="5">

<input type="button" value="字符串拼接法" onclick="method1()">

<input type="button" value="数组赋值join法" onclick="method2()"><br>

<div id="method1"> </div>

<div id="method2"> </div>

<textarea id="show" style="width: 100%; height: 400"></textarea>

<SCRIPT LANGUAGE="JavaScript">

<!--

//这个被拼接的字符串长是100字节 author: meizz

var str = "01234567891123456789212345678931234567894123456789";

    str+= "51234567896123456789712345678981234567899123456789/n";
//方法一

function method1()

{

    var result = "";

    var totle  = parseInt(document.getElementById("totle").value);

    var n = new Date().getTime();
    for(var i=0; i<totle; i++)

    {

        result += str;

    }
    document.getElementById("show").value = result;

    var s = "字符串拼接法:拼接后的大字符串长 "+ result.length +"字节,"+

            "拼接耗时 "+ (new Date().getTime()-n) +"毫秒!";

    document.getElementById("method1").innerHTML = s;

}
//方法二

function method2()

{

    var result = "";

    var totle  = parseInt(document.getElementById("totle").value);

    var n = new Date().getTime();
    var a = new Array();

    for(var i=0; i<totle; i++)

    {

        a[i] = str;

    }

    result = a.join(""); a=null;
    document.getElementById("show").value = result;

    var s = "数组赋值join法:拼接后的大字符串长 "+ result.length +"字节,"+

            "拼接耗时 "+ (new Date().getTime()-n) +"毫秒!";

    document.getElementById("method2").innerHTML = s;

}

//-->

</SCRIPT>

最后我再说几句,是不是以后字符串拼接就一律使用数组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 相关文章推荐
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 #Javascript
javascript解析json实例详解
Nov 05 #Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 #Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 #Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 #Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 #Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
php array_map()函数实例用法
2021/03/03 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
linux面试相关问题
2013/04/28 面试题
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
会计实习期自我鉴定
2013/10/06 职场文书
班组长安全生产职责
2013/12/16 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
swagger如何返回map字段注释
2021/07/03 Java/Android