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面向对象之静态与非静态类
Feb 03 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 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计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
javascript 常用功能总结
2012/03/18 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
如何卸载python插件
2020/07/08 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
行政管理专业推荐信
2013/11/02 职场文书
村委会贫困证明
2014/01/14 职场文书
先进工作者获奖感言
2014/02/08 职场文书
商业街策划方案
2014/05/31 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书