基于JavaScript作用域链的性能调优

JavaScript作用域和作用域链，说起来很简单，但是细细分析，大有玄机。只能真正理解了作用域链原理，才能写出更高效的JavaScript代码。下面，让我们慢慢走近这个并不神秘的区域......

1. 作用域和执行上下文

参考：深入理解JavaScript作用域和作用域链 - 感谢@qwelz订正

JavaScript 的执行分为：解释和执行两个阶段,这两个阶段所做的事并不一样：

• 解释阶段：
  • 词法分析
  • 语法分析
  • 作用域规则确定
• 执行阶段：
  • 创建执行上下文
  • 执行函数代码
  • 垃圾回收

JavaScript 解释阶段便会确定作用域规则，因此作用域在函数定义时就已经确定了，而不是在函数调用时确定，但是执行上下文是函数执行之前创建的。执行上下文最明显的就是 this 的指向是执行时确定的。而作用域访问的变量是编写代码的结构确定的。

作用域和执行上下文之间最大的区别是： 执行上下文在运行时确定，随时可能改变；作用域在定义时就确定，并且不会改变。

2. 执行上下文

执行JavaScript代码时，JavaScript引擎会创建一个执行上下文，它设定了代码执行时所处的环境。

下面一步步剖析~

当页面加载完毕后（含有需要执行的JavaScript代码），JavaScript引擎会做哪些事情？

1. 创建一个全局的执行上下文（this指向我们熟知的window）；
2. 每执行一个JavaScript函数，都会创建一个对应的执行上下文；
3. 函数里面可能执行嵌套函数......继续创建子函数的执行上下文；
4. 最终，会创建出一个栈，当前作用域在栈顶，全局作用域在栈底；

栈顶的函数会最先运行，运行完毕后出栈，继续运行一下个函数......直到栈清空。

3. 作用域链

每个执行上下文都有一个与之关联的作用域链。

当函数被创建时（注意，不是执行），JavaScript引擎会把创建时执行上下文的作用域链赋给函数内部属性[Scope]。 然后，函数被执行，JavaScript引擎创建一个活动对象（Active object），添加到作用域链顶部。

用一个例子做进一步说明：

function add(num1, num2){
  var sum = num1 + num2;
  return sum;
}

var total = add(5, 10);

（图例来自网络）

scope chain.jpg

执行上面的JavaScript代码，但还没有执行add函数时，add函数scope chain只有一个值，指向global object。 然后，执行add函数，一个活动对象被创建，并且被加到scope chain顶部。 由此，执行add函数时，一个两层的作用域链被建立。

小贴士

无论是全局对象还是活动对象，都会在初始化时给this, arguments赋值；
也会给局部变量，局部参数赋值。

显而易见，add函数被执行时，需要寻找num1和num2的值做计算。 如果在顶层作用域找不到这两个值，那么，JavaScript引擎会沿着作用域链，在下一层活动对象/全局对象中查找......找到即返回，找不到继续往下......直到全局对象window。

4. 性能优化：尽可能使用局部变量

通过上面的分析，可以得出结论，如果在越靠近栈顶的对象中，可以找到当前函数执行时所需的变量，那么，函数执行速度是最快的。

也就是说，读取变量值的总耗时随着查找作用域链的逐层深入而不断增加！

因此，为了写出更高效的JavaScript代码，尽可能在函数内部使用局部变量。比如下面的写法就不好：

function createChild(elemID) {
  var element = document.getElementById(elemID); // 在global对象中查找document
  var newElem = document.createElement('div');  // 在global对象中查找document
  element.appendChild(newElem);  //总计查找两次
}

应该改为：

function createChild(elemID) {
  var doc = document; // 在global对象中查找document
  var element = doc.getElementById(elemID);
  var newElem = doc.createElement('div');
  element.appendChild(newElem); //总计查找一次
}

小结

可见，要想写出高性能的JavaScript代码并不难，一点小修改也有大作为~