JS字符串拼接優化

 

// 請把以下用於連接字符串的JavaScript代碼修改為更高效的方式

var htmlString = ‘ < div class=”container” > ’ + ‘ < ul id=”news-list” > ’;
for (var i = 0; i < NEWS.length; i++) {
　　htmlString += ‘ < li > < a href=”’ +NEWS[i].LINK + ‘” > +NEWS[i].TITLE + ‘ < /a > < /li > ’;
}
htmlString += ‘ < /ul > < /div > ’;

考點有兩個：

1. JavaScript字符串的連接機制。
2. 大規模的循環體是重點優化對象

先看第一點,字符串的連接機制

var str ;
str = 'this is a string';
str = str + ',another string.';
對於這個連接操作JS的處理機制是：
(1)新建一個臨時字符串，
(2)將新字符串賦值為 str + ',another string.' ,然后返回這個新字符串
(3)並同時銷毀原始字符串
所以字符串的連接效率較低。提高效率的辦法是用數組的join函數,使用join代替字符串拼接這個技巧對於IE6、7有顯著性能提升，同時對現代瀏覽器，沒有太過明顯的性能損耗

 

第二點,大規模的循環體是主要的優化對象

在JavaScript中，我們可以使用for(;;),while(),for(in)三種循環，事實上，這三種循環中for(in)的效率極差，因為它需要查詢散列鍵，只要可以，就應該盡量少用。for(;;)和while循環，while循環的效率要優於for(;;)，因為for(;;)結構的問題，需要經常跳轉回去。常用的循環優化都會將循環倒過來,最常用的for循環和while循環都是前測試循環，而如do-while這種后測試循環，可以避免最初終止條件的計算，因此運行更快。

        var arr = [1, 2, 3, 4, 5, 6, 7];
        var sum = 0;
        for (var i = 0, l = arr.length; i < l; i++) {
            sum += arr[i];
        }

        //可以考慮替換為：

        var arr = [1, 2, 3, 4, 5, 6, 7];
        var sum = 0, l = arr.length;
        do{
            sum += arr[l];
        }while(l--)

 

NEWS.length需要緩存，減少每次循環都去訪問一次屬性不然每次循環都要重新計算一次length

對NEWS，NEWS[i]使用局部變量是高效的:
var item =NEWS[i]。

NEWS[i].LINK - > item.LINK

NEWS[i].TITLE - > item.TITLE

 

經過上面兩步優化，最終程序為

var htmlString=[];

htmlString.push( "< div class='container' > < ul id='news-list' > ");

//此處要保持拼接的次序,所以采用i++而不是len--的書寫方式
for(var i=0,len=NEWS.length; i<len;i++){
　　var item = NEWS[i];

　　　htmlString .push(‘ < li > < a href=”’ +item.link + ‘” > +item.title + ‘ < /a > < /li > ’);

}

htmlString.push( ‘ < /ul > < /div > ’);
htmlString=htmlString.join(“”);