效能最佳化

效能最佳化

避免不必要的 DOM 操作

瀏覽器遍歷 DOM 元素的代價是昂貴的。最簡單優化 DOM 樹查詢的方案是，當一個元素出現多次時，將它保存在一個變數中，就避免多次查詢 DOM 樹了。

// Recommended
var myList = "";
var myListHTML = document.getElementById("myList").innerHTML;

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

myListHTML = myList;

// Not recommended
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}

快取陣列長度

循環無疑是和 JavaScript 效能非常相關的一部分。透過儲存數組的長度，可以有效避免每次循環重新計算。

附註: 雖然現代瀏覽器引擎會自動優化這個過程，但不要忘記還有舊的瀏覽器。

var arr = new Array(1000),
    len, i;
// Recommended - size is calculated only 1 time and then stored
for (i = 0, len = arr.length; i < len; i++) {

}

// Not recommended - size needs to be recalculated 1000 times
for (i = 0; i < arr.length; i++) {

}

非同步載入第三方內容

當你無法保證嵌入第三方內容例如Youtube 影片或一個like/tweet 按鈕可以正常運作的時候，你需要考慮用非同步載入這些程式碼，避免阻塞整個頁面載入。

(function() {    var script,
        scripts = document.getElementsByTagName('script')[0];    function load(url) {
      script = document.createElement('script');
      script.async = true;
      script.src = url;
      scripts.parentNode.insertBefore(script, scripts);
    }

    load('//apis.google.com/js/plusone.js');
    load('//platform.twitter.com/widgets.js');
    load('//s.widgetsite.com/widget.js');

}());

避免使用jQuery 實作動畫

1.禁止使用slideUp/Down() fadeIn/fadeOut() 等方法；

2.盡量不使用animate() 方法;