// 請把以下用於連線字串的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 > ’;
考點有兩個:
- JavaScript字串的連線機制。
- 大規模的迴圈體是重點優化物件
先看第一點,字串的連線機制
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(“”);