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 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
webpack的移动端适配方案小结
Jul 25 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创建多级目录代码
2008/06/05 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP速成大法
2015/01/30 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
Python3 Random模块代码详解
2017/12/04 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python实现Flappy Bird源码
2018/12/24 Python
python简单验证码识别的实现方法
2019/05/10 Python
python变量命名的7条建议
2019/07/04 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python队列原理及实现方法示例
2019/11/27 Python
Django 路由层URLconf的实现
2019/12/30 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
童装店创业计划书
2014/01/09 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
建国大业观后感
2015/06/01 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS