说明:为了文章的系统性,将本博文原来的两节内容放到了单独的一篇中,请见:《理解Javascript_12_执行模型浅析》
引用变量优化
即然我们已经了解了Javascript中变量的访问规则,那我们就来具体分析一下上面代码中alert(document.body.tagName);这一句的具体执行流程:
![](https://pic002.cnblogs.com/images/2010/138960/2010101123295541.png)
由此可见,要在Fn2中访问window对象下的document对象的body属性的tagName属性是一个比较漫长的过程(这个问题在IE浏览器中尤为严重)。
那么如何优化呢,通过流程图,我们也能发现问题的原因在于引用的级数太多,在《理解Javascript_01_理解内存分配》一文中也说过,通过引用寻找堆中的实际对象也是要花费时间的,这就是性能的瓶颈。现在问题的关键就是如何减小引用的数目,来看一个最简单易行的方案:
2 |
function Fn2(document){ |
3 |
alert(document.body.tagName); |
我们直接将document作为参数传递给Fn2,来看一下现在的执行流程:
![](https://pic002.cnblogs.com/images/2010/138960/2010101123493196.png)
现在方便了,从Fn2 Variable Object可以直接定位到document,引用减少了,效率提高了。
Jquery的策略
Jquery对引用变量的优化也下足了功夫,下面来看一下Jquery的相关代码:
01 |
( function (win, undefined) { |
02 |
var jQuery = function (selector, context) { |
03 |
return new jQuery.fn.init(selector, context); |
05 |
document = window.document, |
06 |
push = Array.prototype.push, |
07 |
slice = Array.prototype.slice; |
09 |
win.$ = win.jQuery = jQuery; |
首先,Jquery定义了一个全局的匿名函数,这个函数有两个参数,一个为win,另一个为undefined.这里说明一点,undefined即不是一个关键字,也不是一个保留字,因此它作了参数的变量名是没有问题的。在调用这个匿名函数时,只传递了一个参数window对象,此时,win指向window对象,undefined变量指象window.undefined(深层次的原理,将在以后的文章中探讨)。然后在匿名函数中,Jquery对常用的全局对象都进行了引用,以后在匿名函数中就可以随意的访问这些变量了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步