ECMAScript字符串连接性能问题

来源：互联网发布：msr606读写器软件编辑：程序博客网时间：2024/04/28 00:46

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() 方法创建最后的字符串最快。