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

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

1. 作用域（也称为执行上下文）

一句话简述“作用域”---“执行JavaScript代码时，JavaScript引擎会创建一个执行上下文，它设定了代码执行时所处的环境”。

下面一步步剖析~

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

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

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

2. 作用域链

每个执行上下文都有一个与之关联的作用域链。
当函数被创建时（注意，不是执行），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。

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

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

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

因此，为了写出更高效的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代码并不难，一点小修改也有大作为~

微信公众号：