javascript string最佳化問題

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

很久沒寫了。

今天看到一個很久的文章說string串連最佳化問題。

於是自己也測試一下。寫了個很簡單的代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">
function winProps(){
var message = [];
var str;
var data = new Date();
var mils1 = data.getTime();
//array數組
        for(var i = 0; i<500000;i++)
            message.push("This window is ");
        message.join(" ");
        data = new Date();
var mils2 = data.getTime();
        arrayMils = mils2 - mils1;
//字串直接連接
        for(var i = 0; i<500000;i++)
            str+="This window is ";
        data = new Date();
var mils3 = data.getTime();
        stringMils=mils3-mils2;

//顯示內容，不重要
        var mes = [];
        mes.push("時間1:");
        mes.push(mils1);
        mes.push("\n時間2");
        mes.push(mils2);
        mes.push("\n時間3");
        mes.push(mils3);
        mes.push("\narray所用時間");
        mes.push(arrayMils>=0?arrayMils:arrayMils+1000);
        mes.push("\nstr串連所用時間");
        mes.push(stringMils>=0?stringMils:stringMils+1000);
        alert(mes.join(" "));
    }
</script>
</head>


<body>
<input type="button" value="點我" onclick="winProps();"/>
</body>

結果不像一般的說法，用array會快。在ie9,8。ff,google,搜狗等ie核心的瀏覽器下測試了一下，確實在數量級100000以上的測試中array方法比用“+”的方法會慢。

1000000次的結果

ie第一次（大概，ie複製不了，圖就不截了）

array所用時間 890
str串連所用時間 450

ie可能是記憶體沒有回收第二次點會彈出警告，並且時間用到1400和1200，點多幾次後，+=的串連方式耗時回到400，難倒是array對象沒有回收？開啟工作管理員，再重新整理一次ie瀏覽器，記憶體降了100多m，應該研究一下ie的javascript記憶體回收機制。

時間1: 1312102053720 
時間2 1312102053842 
時間3 1312102053882 
array所用時間 122 
str串連所用時間 40

google（也複製不了資料）

array所用時間 200
str串連所用時間 100

opera

時間1: 1312102258270 
時間2 1312102258460 
時間3 1312102258592 
array所用時間 190 
str串連所用時間 132

順便說一下，在資料到5000000後ff拋出了個異常，應該是記憶體溢出了。。。（ps，不是很懂）

錯誤： uncaught exception: 8.375396749959738e-274

在ie下測試果斷警告，再後來out of memory。

當然怎麼大的資料連線，在現在的網頁是不可能出現，資料處理應該是在後台做的。老師的主機不敢裝這麼多瀏覽器

其實是array的jion，太消耗時間。沒有加入這一句之後opera，google就顯示出array的優勢：

opera結果：

時間1: 1312101715553 
時間2 1312101715622 
時間3 1312101715749 
array所用時間 69 
str串連所用時間 127

ie結果

array所用時間700
str串連所用時間500

時間1: 1312101925895 
時間2 1312101925945 
時間3 1312101925979 
array所用時間 50 
str串連所用時間 34

google

array所用時間17
str串連所用時間100

去查查jion的機制再寫吧。

ps：瀏覽器版本

google12.0.742.122

ff5.0.1

opera11.50

ie8.0.6001.18702

pss：ie處理速度不給力

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More