ECMAScript字符串连接性能问题

最新推荐文章于 2024-11-08 16:09:18 发布

High_Mount

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量1.1k

点赞数

分类专栏： javascript/DHTML 文章标签： function date javascript 存储 server 测试

本文链接：https://blog.csdn.net/High_Mount/article/details/1653412

版权

javascript/DHTML 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

var str = "hello ";
str += "world";
幕后执行步骤：
(1) 创建存储"hello "的字符串；
(2) 创建存储"world"的字符串；
(3) 创建存储连接结果的字符串；
(4) 把str的当前内容复制到结果中；
(5) 把"world"复制到结果中；
(6) 更新 str ,使他指向结果。
每次完成字符串连接都回执行步骤2到6，这种操作非常消耗资源。如果此过程重复几百次甚至几千次，都回造成性能问题。

解决办法1：使用Array对象
var arr = new Array();
arr[0] = "hello ";
arr[1] = "world ";
var str = arr.join("");
幕后执行步骤：
(1) 创建存储结果的字符串
(2) 把每个字符复制到结果中合适的位置

更好的办法：
自定义类，用StringBuilder 打包该功能
function StringBuffer()
{
     this._strings_=new Array();
}
StringBuffer.prototype.append = function(str)
{
     this._strings_.push(str);
}
StringBuffer.prototype.toString = function()
{
      this._strings_.join("");
}
使用：
var buffer = new StringBuffer();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();

性能测试：

<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " 3_ECMAScript字符串连接性能问题.aspx.cs " Inherits = " _16_JavaScript高级程序设计_3_ECMAScript字符串连接性能问题 " %>

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head runat = " server " >
     < title > ECMAScript字符串连接性能问题 </ title >
     < script language = " javascript " type = " text/javascript " >

        var d1 = new Date();
        var str = "" ;
         for (var i = 0 ; i < 10000 ; i ++ )
        {
            str += " text " ;
        }
        var d2 = new Date();
        document.write( " Connection with plus: " + (d2.getTime() - d1.getTime()) + " milliseconds " );

         // ================================================================================

        var arr = new Array;
        d1 = new Date();
         for (var i = 0 ; i < 10000 ; i ++ )
        {
            arr[i] = " text " ;
        }
        var strtest = arr.join( "" );
        d2 = new Date();

        document.write( " <br/>Connection with Array: " + (d2.getTime() - d1.getTime()) + " milliseconds " );

         // ================================================================================
        function StringBuffer()
        {
              this ._strings_ = new Array();
        }
        StringBuffer.prototype.append = function(str)
        {
              this ._strings_.push(str);
        }
        StringBuffer.prototype.toString = function()
        {
               return this ._strings_.join( "" );
        }

        var oBuffer = new StringBuffer();

        d1 = new Date();
         for (var i = 0 ; i < 10000 ; i ++ )
        {
            oBuffer.append( " text " );
        }
        var sResult = oBuffer.toString();
        d2 = new Date();

        document.write( " <br/>Connection with StringBuffer: " + (d2.getTime() - d1.getTime()) + " milliseconds " );
     </ script >
</ head >
< body >
     < form id = " form1 " runat = " server " >
     < div >

     </ div >
     </ form >
</ body >
</ html >

测试结果：

Connection with plus:188 milliseconds
Connection with Array:31 milliseconds
Connection with StringBuffer:110 milliseconds

结论：使用Array对象存储字符串，然后用join() 方法创建最后的字符串最快。