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对常用的全局对象都进行了引用，以后在匿名函数中就可以随意的访问这些变量了。