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

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

  1. var str = "01234567891123456789212345678931234567894123456789";
  2. str+= "51234567896123456789712345678981234567899123456789/n";
  3. var result = "";
  4. for(var i=0; i<2000; i++) result += str;

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

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

  1. var str = "01234567891123456789212345678931234567894123456789";
  2. str+= "51234567896123456789712345678981234567899123456789/n";
  3. var result = "", a = new Array();
  4. for(var i=0; i<2000; i++) a[i] = str;
  5. result = a.join(""); a = null;

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

  1. <body>
  2. 字符串拼接次数<input id="totle" value="1000" size="5" maxlength="5">
  3. <input type="button" value="字符串拼接法" onclick="method1()">
  4. <input type="button" value="数组赋值join法" onclick="method2()"><br>
  5. <div id="method1">&nbsp;</div>
  6. <div id="method2">&nbsp;</div>
  7. <textarea id="show" style="width: 100%; height: 400"></textarea>
  8. <SCRIPT LANGUAGE="JavaScript">
  9. <!--
  10. //这个被拼接的字符串长是100字节 author: meizz
  11. var str = "01234567891123456789212345678931234567894123456789";
  12. str+= "51234567896123456789712345678981234567899123456789/n";

方法一

  1. function method1()
  2. {
  3. var result = "";
  4. var totle = parseInt(document.getElementById("totle").value);
  5. var n = new Date().getTime();
  6. for(var i=0; i<totle; i++)
  7. {
  8. result += str;
  9. }
  10. document.getElementById("show").value = result;
  11. var s = "字符串拼接法：拼接后的大字符串长 "+ result.length +"字节，"+
  12. "拼接耗时 "+ (new Date().getTime()-n) +"毫秒！";
  13. document.getElementById("method1").innerHTML = s;
  14. }

方法二

  1. function method2()
  2. {
  3. var result = "";
  4. var totle = parseInt(document.getElementById("totle").value);
  5. var n = new Date().getTime();
  6. var a = new Array();
  7. for(var i=0; i<totle; i++)
  8. {
  9. a[i] = str;
  10. }
  11. result = a.join(""); a=null;
  12. document.getElementById("show").value = result;
  13. var s = "数组赋值join法：拼接后的大字符串长 "+ result.length +"字节，"+
  14. "拼接耗时 "+ (new Date().getTime()-n) +"毫秒！";
  15. document.getElementById("method2").innerHTML = s;
  16. }
  17. //-->
  18. </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组合拼接字符串的效率 --转载的更多相关文章

  1. java 几种拼接字符串的效率问题

    拼接字符串,大致有3个class可以用,他们是String, StringBuffer,StringBuilder, StringBuilder是1.5中来代替StringBuffer的.检验方法如下 ...

  2. javascript参数化拼接字符串两种方法

    javascript如果直接使用字符串+的话,会被大量单引号搞晕,可以有两种比较简单的方法使用参数化拼接. 方式一,传统js //示例:StringFormat("abc{0}def&quo ...

  3. 浅谈JavaScript中的字符串操作

      我想,最为一名开发人员,最实际开发过程中,任何一门语言在开发实际的项目的过程中,都是逃不开字符串的操作的下面笔者就自己日常开发过程中所用到的一些字符串的操作方法做一些陈述和总结,当然,如若读者觉得 ...

  4. c++拼接字符串效率比较（+=、append、stringstream、sprintf）

    转自:http://www.cnblogs.com/james6176/p/3222671.html c++拼接字符串效率比较(+=.append.stringstream.sprintf) 最近写的 ...

  5. 浅谈JavaScript字符串拼接

    本文给大家汇总介绍了几种javascript中字符串拼接的方法,十分的简单实用,有需要的小伙伴可以参考下. 在JavaScript中会经常遇到字符串拼接,但是如果要拼接的字符串过长就比较麻烦了. 如果 ...

  6. 测试一下StringBuffer和StringBuilder及字面常量拼接三种字符串的效率

    之前一篇里写过字符串常用类的三种方式<java中的字符串相关知识整理>,只不过这个只是分析并不知道他们之间会有多大的区别,或者所谓的StringBuffer能提升多少拼接效率呢?为此写个简 ...

  7. JavaScript 优雅简单的拼接字符串

    前言 最近维护一个老系统,里面有大量js拼接字符串的代码,这里总计一下js拼接字符串 JS 原生字符串拼接 JavaScript里面的字符串可以直接用 + 来拼接 return "<a ...

  8. String拼接字符串效率低，你知道原因吗？

    面试官Q1:请问为什么String用"+"拼接字符串效率低下,最好能从JVM角度谈谈吗? 对于这个问题,我们先来看看如下代码: public class StringTest { ...

  9. C#三种字符串拼接方法的效率对比

    C#字符串拼接的方法常用的有:StringBuilder.+.string.Format.List<string>.使用情况不同,效率不同. 1.+的方式 string sql = &qu ...

随机推荐

  1. activiti

    http://activiti.org/designer/archived/  eclipse plugin

  2. ubuntun pptpd

    apt-get install pptpd 3.编辑pptpd.conf文件 vi /etc/pptpd.conf 取消注释下面内容 option /etc/ppp/pptpd-options loc ...

  3. 同时执行2个存储过程，2个SP中分别有相同的临时表名，会有冲突吗?

    同时执行2个存储过程,2个SP中分别有相同的临时表名,会有冲突吗?答案:不会 这就可以在以后写存储过程的时候统一临时表名了. alter procedure sp_01 as begin create ...

  4. 找到一个学习bootstrap的好网站

    http://www.w3cschool.cc/bootstrap/bootstrap-css-overview.html

  5. Linux下安装MySQLdb模块

    1,查看是否已安装MySQLdb模块 进入python的命令行,输入 import MySQLdb 如果没有报错,证明此模块已经安装,可以跳过以下步骤. 2,下载最新的MySQLdb安装包: wget ...

  6. 用Swift重写公司OC项目(Day2)--创建OC与Swift的桥接文件,进而调用OC类库

    昨天把项目中的图标以及启动转场图片弄好了,那么今天,我们可以开始慢慢进入到程序的编写当中了. 由于swift较新,所以类库还不够完善,但是不用担心,苹果早就出了解决方案,那就是使用桥接文件,通过桥接文 ...

  7. Windows Server 2003服务器.net4.0+IIS6.0的服务器,IE11浏览器访问的不兼容性

    工作中发生了一件诡异的事情: 程序在Win7+.NET4.0+IIS7.5的服务器部署,IE8和IE11请求时,响应的样式都正常. 但是在美的同事反映说,Windows Server 2003服务器. ...

  8. Machine Learning 学习笔记 (1) —— 线性回归与逻辑回归

    本系列文章允许转载,转载请保留全文! [请先阅读][说明&总目录]http://www.cnblogs.com/tbcaaa8/p/4415055.html 1. 梯度下降法 (Gradien ...

  9. Shade勒索病毒 中敲诈病毒解密 如 issbakev9_Data.MDF.id-A1E.f_tactics@aol.com.xtbl 解决方法

    [客户名称]:福建福州市某烘焙连锁企业 [软件名称]:思迅烘焙之星V9总部 [数据库版本]:MS SQL server 2000  [数据库大小]:4.94GB [问题描述]:由于客户服务器安全层薄弱 ...

  10. c enum用法

    c语言中enum的用法,先用关键字enum声明一个类型如enum HUMAN {MAN ,WOMAN};这里就声明了一个HUMAN这个枚举类型.其中MAN的值为0,后面依次递增.后面要用的时候,先声明 ...