高性能JavaScript笔记：数据的存储与访问性能优化

变量作用域与访问速度

局部变量指在函数内部定义的变量。由于它位于作用域链的第一个变量对象中，访问局部变量的速度显著快于域外变量（关于作用域链的机制可参考相关文档）。变量在作用域链中的层级越深，访问所需时间越长；全局变量因位于作用域链末端，访问速度最慢。

不同数据类型的访问均存在性能开销。直接量和局部变量的访问成本较低，而访问数组项和对象成员的成本相对较高。下图展示了不同浏览器对四种数据类型执行200,000次操作所消耗的时间对比。

基于上述图表，优化代码性能的关键策略包括：优先使用直接量和局部变量；限制对数组项和对象成员的访问频率，例如将常用的对象成员赋值给局部变量后再进行访问。

对象成员访问机制

理解对象成员的访问机制是优化的前提。函数本质上是一种特殊对象，因此对象成员的访问与函数内部变量的访问机制相似，均基于链式查找：前者依赖原型链，后者依赖作用域链，两者在链式结构的具体实现上存在差异。

对象成员分为属性和方法两类：若成员为函数则称为方法，否则称为属性。

JavaScript采用基于原型的模型，原型本身也是一个对象，作为其他对象的基础。当实例化Object或其他内置对象时（如var obj=new Object()或var obj={}），系统会自动为实例obj创建原型。在Firefox、Safari和Chrome等浏览器中，可通过obj.__proto__属性（等同于Object.prototype）访问该原型。正是由于这一原型机制，每个实例都能共享原型对象的成员。例如：

 
var book = {
name:"Javascript Book",
getName = function(){
return this.name;
} 
}; 
alert(book.toString()); //"[object Object]"

此代码中，book对象包含两个私有成员：属性name和方法getName。尽管book对象未定义toString成员，但调用时并未报错，原因是book继承了原型对象的成员。book对象与原型的层级关系如下：

访问book对象的toString成员过程如下：当执行book.toString()时，系统首先搜索名为“toString”的成员。若从实例book本身找到该成员，则搜索结束；否则，系统沿__proto__指向的原型对象继续搜索。若在Object的原型对象中仍未找到该成员，则判定为未定义。通过此机制，book可访问其原型对象拥有的所有属性或方法。

原型链深度对性能的影响

对象的高级应用包括模拟类和继承，这种用法常被称为“对象类”。继承主要依赖原型链实现，该知识点较为复杂，需另行详细说明。基于前述对象成员搜索过程，对象成员的访问速度随原型链深度增加而降低。下图展示了对象成员在原型链中的深度与访问时间的关系：

由上图可知，每深入原型链一层都会增加性能损耗。因此，遍历对象成员的操作开销较大。另一种常见且耗时的做法是访问嵌套对象成员（如window.location.href）。最佳实践是减少点号（.）的使用次数，例如location.href的访问速度优于window.location.href。

总结而言，属性或方法在原型链中的位置越深，访问速度越慢。解决方案是将频繁使用的对象成员、数组项及域外变量存储为局部变量，通过访问局部变量来提升性能。