zoukankan      html  css  js  c++  java
  • 转发:关于javascript字符串连接性能

    http://www.cnblogs.com/chyingp/archive/2010/10/07/1844887.html

    原文出处: 

    最近在看《高性能网站建设进阶指南》,第七章为《编写高效的javascript》,作者为Nicholas C. Zakas(同时也是《javascript高级程序设计》的作者),里面讲到字符串连接的优化问题。

    字符串连接一直是javascript中性能最低的操作之一,通常情况下,字符串连接是通过使用加法运算符(+)来实现的,比方说

    var text="hello"; 
    text+=" "; 
    text+="world!";

    早期浏览器没有对这种运算进行优化。由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。参照《javascript高级程序设计》,大致要经过以下几个步骤:

    1. 创建存储"hello"的字符串。
    2. 创建存储"world"的字符串。
    3. 创建存储连接结果的字符串。
    4. 把str的当前内容复制到结果中。
    5. 把"world "复制到结果中。
    6. 更新str,使它指向结果。

    频繁地在后台创建和销毁字符串会导致字符串连接的性能异常低下。

    好在如今大部分浏览器已经对字符串连接进行了优化。第一款进行优化的浏览器是Firefox,从1.0版本开始,在所有情况下使用数组技术实际上都比使用加法运算慢。其他浏览器也优化了字符串连接,Safari、Opera、Chrome和Internet Explorer8也都在使用加法运算符上表现出了更好的性能。(PS:在Ie8之前的版本没有进行优化)

    那么,在浏览器还未对字符串连接性能进行优化之前,该怎么改进其性能呢?其中一种普遍使用的方法就是使用Array对象,方法如下:

    function StringBuffer(){

        this._strings=new Array();

    }

    StringBuffer.prototype.append=function(str){

        this._strings.push(str)

    }

    StringBuffer.prototype.toString=function(){

        return this._strings.join("");

    }

    这样,无论在数组中引入多少字符串都不成问题,因为只有在调用join()方法时才会发生连接操作,此时步骤如下:

    1. 创建存储结果的数组
    2. 把每个字符串复制到结果中的合适位置
    3. 将数组合并成字符串返回

    经过测试,采用上述方法,在Firefox 3.6中以及Ie 8中,性能其实比直接用加法运算符(+)效率要低(上文说过现在大部分主流浏览器都已经经过优化),然而,在IE 8之前版本的IE浏览器中,采用这种方法连接字符串,性能比直接用加法运算符(+)有很大的提高,大概是60%左右(也就是花费的时间为原来的1/3左右),用的是《javascript高级程序设计》里的测试代码:

     var d1=new Date();
     var str="";
     for(var i=0;i<10000;i++){
         str+="text";
     }
     var d2=new Date();
     var d3=d2.getTime()-d1.getTime();

     
     var buffer=new StringBuffer();
     d1=new Date();
     for(var j=0;j<10000;j++){
         buffer.append("text");
     }
     var result=buffer.toString();
     d2=new Date();
     var d4=d2.getTime()-d1.getTime();

     alert("d3:"+d3+" d4:"+d4);

     

    以下是Nicholas C. Zakas大牛对决定如何连接字符串的建议,需要考虑两个因素:(1)被连接的字符串大小(2)数量

    • 当字符串较小(少于20个字符)且连接的数量也较小时(少于1000个),所有的浏览器中使用的加法运算符都能在不到1毫秒之内轻松完成连接。在这种情况下就没有理由去考虑加法运算符以外的方式了。

     

    • 增加连接字符串的数量或大小时,在IE 7中性能会明显下降。当字符串大小增加时,在Firefox中加法运算符和数组技术的性能差异会变小。当字符串连接数量增加时,在Safari中这两种技术的新能差异也同样会变小。只有Chrome和Opera在改变连接字符串的大小和数量时,加法运算符一直保持着显著的性能优势。

     

    • 由于在各浏览器下性能不一致,所以选用哪种技术在很大程度上取决与实际情况和面对的浏览器。如果用户主要使用IE 6或7,那么使用数组技术就很值得,因为这会影响大多数人。(备注:目前国内使用IE 6的人不少。。。)通常使用数组技术在其他浏览器中的性能损失要远小于在IE中的性能提升,所以要基于用户的浏览器来权衡用户体验,而不要视图去针对某种具体情况或浏览器版本。不过,在大多数情况下,加法运算符也是首选的。
  • 相关阅读:
    牛客网 哈尔滨理工大学第七届程序设计竞赛决赛(网络赛-低年级组)求最大值
    HDU 5024 Wang Xifeng's Little Plot(DFS)
    java正则表达式
    48.自用qss
    47.使用帧缓存对象生成叠加
    46.Qt 使用OpenGL绘制立方体
    45.Qt openGL实现三维绘图
    44.Qt通过子类化qstyle实现自定义外观
    43.qt通过qss自定义外观
    42.写入XML
  • 原文地址:https://www.cnblogs.com/trance/p/2160711.html
Copyright © 2011-2022 走看看