高性能JavaScript 編程實踐

前言

　　最近在翻《高性能JavaScript》這本書（2010年版 丁琛譯），感覺可能是因為瀏覽器引擎的改進或是其他原因，書中有些原本能提高性能的代碼在最新的瀏覽器中已經失效。但是有些章節的有些內容還是相當不錯的，譬如第八章編程實踐，為了方便以后的查閱，對此做個總結。失效的代碼也會在以后做更進一步的探索。

避免雙重求值

　　這個優化策略很好理解，我們可能都已經不知不覺地運用在了實際的編程中：

// not use this
setTimeout('alert("hello world")', 1000);

// use this
setTimeout(function() {
  alert('hello world');
}, 1000);

　　上面的兩段代碼都能執行，但是我們一般用第二種，同樣的對於setInterval來說也是如此，類似的還有eval()以及Function()構造函數。JavaScript像其他很多腳本語言一樣，允許你在程序中提取一個包含代碼的字符串，然后動態執行它。當你在JavaScript代碼中執行另一段JavaScript代碼時，都會導致雙重求值的性能消耗，此代碼首先會以正常的方式求值，然后在執行過程中對包含於字符串中的代碼發起另一個求值運算。所以，大多數時候沒必要使用eval()和Function()，就避免使用它們；至於setTimeout和setInterval，建議傳入函數而不是字符串來作為第一個參數。

　　由此聯想到了php中的''和“”，我們盡量用''去引用字符串，也是同樣的原因。

使用Object/Array直接量

// use this
var obj = {
  name: 'hanzichi',
  age: 10
};

var arr = [0, 1, 2, 3];

// not use this
var obj = new Object();
obj.name = 'hanzichi';
obj.age = 10;

var arr = new Array();
arr[0] = 0;
arr[1] = 1;
arr[2] = 2;
arr[3] = 3;

不要重復工作

　　也許最常見的重復工作就是瀏覽器探測（當然“不要重復工作”只是一種思想，並不一定針對瀏覽器探測）。

　　考慮一個添加事件處理器的例子，典型的跨瀏覽器代碼寫法如下：

function addHandler(target, eventType, handler) { 
  if (target.addEventListener) {  // DOM2 Events
    target.addEventListener(eventType, handler, false);
  } else {  // IE
    target.attachEvent('on' + eventType, handler);
  }
}           

addHandler(document, 'click', function() {
  console.log('hello world');
});

　　但是如果一個頁面調用了好多次addHandler函數添加事件，每次都會去做瀏覽器的判斷，但是事實是每次的判斷結果都是一樣的，因為瀏覽器並不會變化，這時我們就可以針對“不要重復工作”做一個優化策略。

• 延遲加載

　　延遲加載，也稱惰性加載，惰性載入等。延遲加載意味着在信息被使用前不會做任何操作：

function addHandler(target, eventType, handler) { 
  if (target.addEventListener) {  // DOM2 Events
    addHandler = function(target, eventType, handler) {
      target.addEventListener(eventType, handler, false);
    };
  } else {  // IE
    addHandler = function(target, eventType, handler) {
      target.attachEvent('on' + eventType, handler);
    };
  }
  addHandler(target, eventType, handler);
}           

// 調用
addHandler(document, 'click', function() {
  console.log('hello world');
});

addHandler(window, 'keydown', function() {
  console.log('key down');
});

　　方法在第一次被調用時，會先檢查並決定使用哪種方法去綁定事件處理器，然后原始函數被包含正確操作的新函數覆蓋。最后一步調用新的函數（也可以直接return 新的函數），並傳入原始參數。之后的每次調用addHandler()都不會再做檢測，因為檢測代碼已經被新的函數覆蓋。

　　調用延遲加載函數時，第一次總會消耗較長的時間，因為它必須運行檢測接着再調用另一個函數完成任務，但隨后調用函數會變快，因為不需要再進行檢測。當一個函數在頁面中不會立即調用時，延遲加載是最好的選擇。

• 條件預加載

　　條件預加載會在腳本加載期間提前檢測，而不會等到函數被調用：

var addHandler = document.addEventListener ? 
  function(target, eventType, handler) {
    target.addEventListener(eventType, handler, false);
  }:
  function(target, eventType, handler) {
    target.attachEvent('on' + eventType, handler);
  };    

// 調用
addHandler(document, 'click', function() {
  console.log('hello world');
});

addHandler(window, 'keydown', function() {
  console.log('key down');
});

　　條件預加載確保所有函數消耗的時間相同，其代價是需要在腳本加載時就檢測，而不是加載后。預加載適用於一個函數馬上就要被用到，並且在整個頁面的生命周期中頻繁出現的場合。

 

　　常見的“不要重復工作”還有做ajax時候的瀏覽器探測，自己可以思考下寫寫代碼。

使用速度快的部分

• 位運算

　　用位運算加速大家都應該熟悉並且熟練掌握：

// use &1 instead of %2
var a = 10;
if (a & 1) {  // use this
  // ...
}

if (a % 2) { // not use this
  // ...
}

// use << 1 instead of *2
var a = 10;
var b = a << 1; // use this
var b = a * 2;  // not use this

var a = 10;
var b = a >> 1; // use this
var b = a / 2;  // not use this

　　位運算除了能加速快，還能用在各種算法和數據結構中，比如狀態壓縮dp，按位dp等等。

• 原生方法

　　無論你的JavaScript代碼如何優化，都永遠不會比JavaScript引擎提供的原生方法更快，因為JavaScript原生部分在你寫代碼前就已經存在在瀏覽器中了，並且都是用底層語言寫的，諸如C++。這意味着這些方法會被編譯成機器碼，成為瀏覽器的一部分。

　　所以盡量用一些內置的函數或者常量，比如Math對象提供的：

Math.E
Math.LN10
Math.LN2
Math.PI
Math.SQRT1_2
Math.abs()
Math.sin()
Math.sqrt()
.
.
.

　　另外一個例子是選擇器API，它允許使用CSS選擇器來查找DOM節點。CSS查詢被JavaScript原生支持並被JQuery發揚光大。JQuery引擎被廣泛認為是最快的CSS查詢引擎，但是它仍然比原生方法慢。原生的querySelector()和querySelectorAll()方法完成任務平均所需時間是基於JavaScript的CSS查詢的10%。所以當原生方法可用時，盡量使用它們。特別是數學運算和DOM操作，用編譯后的代碼做更多的事情，你的代碼就會越快。