Javascript性能优化（二）- 数据访问优化

目录

数据访问

数据的存储位置，关系到代码运行时数据被检索到的速度，JS中有四种数据存储位置：直接量、变量、数组、对象。其中直接量可能比较少听说，其实可以理解为表示匿名函数、匿名对象的一个变量，如var sum = function(a,b){return a+b}，sum就是一个函数直接量。

四种数据存储位置中，直接量和局部变量的访问性能微不足道，性能消耗高的是全局变量、数组和对象成员。

Scope

每一个JS函数都是一个对象，函数对象和其他对象一样，拥有编程可以访问的属性和仅供JS引擎使用的属性。其中有一个虚拟属性叫做[[Scope]]，[[Scope]]中包含函数作用域中对象的集合（作用域链），它表示当前函数环境可以访问的数据，以链式存在，作用域链的创建改变过程如下：

1. 声明一个函数时函数作用域链中被推入一个可变的全局变量，代表了所有全局范围内的变量。作用域链：A

2. 执行一个函数时会创建一个内部对象（执行完销毁），称其为运行期上下文，运行期上下文会拷贝函数本身的[[Scope]]对象，按照原来的顺序复制到运行期上下文的作用域链中，此时的运行期上下文作用域链：A。然后运行期上下文的作用域链中被推入一个新的对象，名叫‘激活对象’，它存储了所有的局部变量、命名参数、参数集合和this的接口。此时运行期上下文作用域链：B -> A

3. 当函数运行遇到变量时，会检索作用域链，首先会去B中查找是否存在，再去A中查找，显然A中变量访问性能要比B中的更慢。

优化数据检索

• 既然全局变量的访问性能更慢，那么当一个函数中多次访问全局变量的时候，就应该用一个局部变量来进行缓存。

function fun(){    var doc = document;    a = doc.getElementById("a");    b = doc.getElementById("b");    c = doc.getElementById("c");}

• 减少使用动态作用域链：with()可以临时改变函数的作用域链，把变量推到作用域链最前端，如下面的demo，运行期上下文作用域链：document -> B -> A，在使用getElementById的时候会先到document对象里查找，速度确实快了。但是问题也显而易见，因为局部变量对象B被推到了第二，所以当访问a,b,c变量的时候，多查找了一次document对象，有时候得不偿失。

// 当使用with时，document临时被放到了作用域链的最前端// 在使用getElemntById时会先到document对象里面寻找function fun(){    with(document){        a = getElementById("a");        b = getElementById("b");        c = getElementById("c");    }}

• try-catch：当运行出错时，程序会自动把异常推到作用域链的最前端，带来性能问题，可以在catch块中运行错误处理函数，将错误对象作为参数传给错误处理函数，catch块中作用域链的改变就没什么影响了。

try{    //do something}catch(e){    handleError(e);}

• 慎用闭包：原因有两个，一个是函数闭包访问外部变量最少经过两次查找。二是如果闭包需要访问外部变量，那么函数运行期的激活对象就会被保存，无法销毁，不仅会消耗更多内存，在IE中还会导致内存泄漏。

原型

• 什么是原型？初学者往往很难理解原型的概念，如果你了解过OOP的编程语言，那么对继承一定不陌生，原型可以简单的理解为被继承的基类。任何时候创建一个实例，这些实例都将自动拥有一个Object作为他们的原型。
• 一个对象拥有两种成员：实例成员和原型成员。实例成员直接存在于实例自身，原型成员则是从原型继承。
• 下面的例子中，cat的实例成员是name和age，原型成员就是cat.proto中的成员属性，即Object中的属性（Object.prototype）。如调用toString方法，会先在cat的实例成员中查找，找不到再去原型成员中查找，所以同样导致性能问题。

// cat._proto_ = Objectvar cat = {    name:"xiaohua",    age:1}

原型链

• 对象的原型决定了一个实例的类型，默认情况下对象都是Object的实例，但当我们使用构造器创建实例时，就创建了另外一种类型的原型。
• 如下面的例子，cat._proto_ = Animal.prototype，Animal.prototype._proto_ = Object。如果我们调用了toString，搜索路径如下：cat -> cat._proto_(Animal.prototype) -> cat._proto_.constructor(Animal) -> cat._proto_.constructor._proto_(Object)

function Animal(name,age){    this.name = name;    this.age = age;}// 通过prototype可以向函数对象添加成员Animal.prototype.sayHello = function(){    console.log("Hello,I am a " + this.name);}var cat = new Animal("cat",1);var dog = new Animal("dog",1);

缓存对象成员的值

由原型链的访问过程可知，当访问的对象成员处在较深处时，访问的代价还是挺大的，所以当多次访问同一个对象成员时，可以进行缓存。

function foo(ele,className1,className2) {    // 可以用一个局部变量来存储ele.className    // var eleClassName = ele.className;    return ele.className == className1 || ele.className == className2;}

总结

• 针对数据访问导致的相关性能问题，主要的解决办法就是对数据进行暂存，比如将全局变量暂存为局部变量，减少作用域链的深入搜索；将实例的属性暂存，减少对原型链的多次深入搜索；另一个就是减少使用动态作用域和闭包。