彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > 谈JavaScript组合拼接字符串的效率

谈JavaScript组合拼接字符串的效率

发布时间:2019-09-03 21:50编辑:新闻动态浏览(170)

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

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

     在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出。比如写脚本控件时控制整个控件的外观的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法优于传统字符串拼接。

    在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出。比如写脚本控件时...

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

    相关文章

    相关搜索:

    今天看啥

    搜索技术库

    返回首页

    • jsp页面中引用其他页面的方法,jsp页面引用方
    • web移动端触摸滑动事件,web触摸滑动事件
    • javascript下拉刷新,javascript下拉
    • JavaScript中getter/setter的实现
    • javascript中操作字符串小结
    • 在JavaScript 中创建JSON对象--例程分析

    相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

    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">&nbsp;</div>  <div id="method2">&nbsp;</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毫秒!

    本文由彩世界平台发布于新闻动态,转载请注明出处:谈JavaScript组合拼接字符串的效率

    关键词: