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-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
React 组件间的通信示例
Jun 14 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 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
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
vue实现全选、反选功能
2020/11/17 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python实现抽奖小程序
2020/04/15 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
python3图片文件批量重命名处理
2019/10/31 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
最新创业融资计划书
2014/01/19 职场文书
小学音乐教学反思
2014/02/05 职场文书
网页美工求职信范文
2014/04/17 职场文书
政府门卫岗位职责
2014/04/29 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
python通过opencv调用摄像头操作实例分析
2021/06/07 Python