《高性能JavaScript》学习笔记（一）

 

一、加载和执行

 

1. 脚本位置          -- Javascript在加载后会立即执行，一个脚本执行完后页面才会继续进行渲染。所以不在一开始就需要执行的脚本，可以放置在body标签的最后面进行加载。

 

2. 组织脚本          -- 减少页面脚本的加载数量（a. 同样大小的单个文件和多个文件,单个文件的加载更快；b. 可以减少HTTP请求数量）；减少页面中内嵌脚本的数量，因为他们也同样会影响页面的渲染速度。

 

3. 无阻塞的脚本    -- 可以在页面渲染完之后，进行脚本的加载（a.使用defer；b.动态script标签；c.XHR脚本注入）

 

 

二、数据访问

 

1. 管理作用域       -- 当使用对象调用方法的时候，例如： getNum()。 Javascript会个getNum方法创造一个独一无二的“运行期上下文”。

 

“运行期上下文”包含一个作用域链，作用域链的第一顺位是个“活动对象”用于保存方法中包含的对象，后续顺位保存逐级的作用域对象，直到全局域。

 

当方法中遇到一个变量时，则会从作用域链的第一顺位的“活动对象”中搜索该变量，如果没有则去第二顺位，直到找到该变量为止， 如果没有找到则返回undefined。

 

当有两个变量名称相同时，第一个找到的变量会遮蔽第二个。

 

 所以，局部声明的变量可以覆盖该作用域外的变量。

 

同时， 如果一直调用一个顶级的对象，比如 window，这样效率就会低下。比较好的方法就是将window对象保存为一个局部的变量进行使用。 

 

with & try - catch 可以改变上下文作用域链。不推荐使用with，有可能事情弄复杂。

 

关于闭包： 在执行闭包时， 其父域中被引用的对象没有被销毁。在创建作用域链时，被保存在第二顺位。不但会占用内存不放，同时也会影响性能。

 

 

2. 对象成员

 

JavaScript中的继承基于原型，对象通过一个内部属性 _proto_ 绑定到它的原型。

 

当一个对象的实例调用原型的方法的时候，和作用域链一样，会先去搜索自己的实例是否有这个成员方法，如果没有的话则去搜索原型对象，找到并执行。

 

hasOwnProperty()来判断对象是否有特定的属性；

in来判断直至原型中是否有特定的属性

 

1）嵌套成员 如果一个方法调用，使用的点越多。如 aObj.bObj.cObj.dFunc(). 这样无疑是效率低下的。

 

原因是，引擎一开始就会去 aObj中搜索bObj，从bObj中搜索cObj，然后在cObj中找到dFunc()，并执行。这样一层层下来，性能消耗是很可观的。

 

如果dFunc()在cObj中没有的话，引擎还需要搜索原型链。 it gets more time...

 

一个好的解决方案就是将“点链”缓存：  

 

var cTmpObj = aObj.bObj.cObj;

cTmpObj.dFunc();

 

这样可以很好的，提高重复读取cObj中方法的性能。