Javascript提速_01_引用變數最佳化

說明：為了文章的系統性，將本博文原來的兩節內容放到了單獨的一篇中，請見：《理解Javascript_12_執行模型淺析》 

引用變數最佳化

即然我們已經瞭解了Javascript中變數的訪問規則，那我們就來具體分析一下上面代碼中alert(document.body.tagName);這一句的具體執行流程：

由此可見，要在Fn2中訪問window對象下的document對象的body屬性的tagName屬性是一個比較漫長的過程(這個問題在IE瀏覽器中尤為嚴重）。

 

那麼如何最佳化呢，通過流程圖，我們也能發現問題的原因在於引用的級數太多，在《理解Javascript_01_理解記憶體配置》一文中也說過，通過引用尋找堆中的實際對象也是要花費時間的,這就是效能的瓶頸。現在問題的關鍵就是如何減小引用的數目，來看一個最簡單易行的方案：

function Fn1(){function Fn2(document){alert(document.body.tagName);//BODY//other code...}Fn2(window.document);}Fn1();//code here

我們直接將document作為參數傳遞給Fn2,來看一下現在的執行流程:

現在方便了，從Fn2 Variable Object可以直接定位到document，引用減少了，效率提高了。

 

Jquery的策略

Jquery對引用變數的最佳化也下足了功夫，下面來看一下Jquery的相關代碼：

(function(win, undefined) {var jQuery = function(selector, context) {return new jQuery.fn.init(selector, context);},document = window.document,push = Array.prototype.push,slice = Array.prototype.slice;win.$ = win.jQuery = jQuery;})(window);

首先，Jquery定義了一個全域的匿名函數，這個函數有兩個參數，一個為win,另一個為undefined.這裡說明一點,undefined即不是一個關鍵字，也不是一個保留字，因此它作了參數的變數名是沒有問題的。在調用這個匿名函數時，只傳遞了一個參數window對象，此時，win指向window對象，undefined變數指象window.undefined(深層次的原理，將在以後的文章中探討)。然後在匿名函數中，Jquery對常用的全域對象都進行了引用，以後在匿名函數中就可以隨意的訪問這些變數了。