28.2 性能

28.2.1 作用域意识

随着作用域链中作用域数量的增加，访问当前作用域外部变量所需的时间也会增加。
访问全局变量始终比访问局部变量慢，因为必须遍历作用域链。
任何可以缩短遍历作用域链时间的举措都能提升代码性能。

1．避免全局查找

全局变量和函数相比于局部值始终是最费时间的，因为需要经历作用域链查找。

function updateUI() {
  let imgs = document.getElementsByTagName('img');
  for (let i = 0, len = imgs.length; i < len; i++) {
    imgs[i].title = `${document.title} image ${i}`
  }
  let msg = document.getElementById('msg');
  msg.innerHTML = '更新完成。';
}

其中三个地方引用了全局document对象。如果页面的图片非常多，那么for循环中就需要引用document几十甚至上百次，每次都要遍历一次作用域链。
通过在局部作用域中保存document对象的引用，能够明显提升这个函数的性能，因为只需要作用域链查找。
通过创建一个指向document对象的局部变量，可以通过将全局查找的数量限制为一个来提高这个函数的性能

function updateUI() {
  let doc = document;
  let imgs = doc.getElementsByTagName('img');
  for (let i = 0, len = imgs.length; i < len; i++) {
    imgs[i].title = `${doc.title} image ${i}`;
  }
  let msg = doc.getElementById('msg');
  msg.innerHTML('更新完成。')；
}

先把document对象保存在局部变量doc中。然后用doc替代了代码中所有的document。这样调用这个函数只会查找一次作用域链，相对上一个版本，肯定会快很多。
因此，一个经验规则就是，只要函数中有引用超过两次的全局对象，就应该把这个对象保存为一个局部变量。

2．不使用with语句

在性能很重要的代码中，应避免使用with语句。
与函数类似，with语句会创建自己的作用域，因此也会加长其中代码的作用域链。
实际编码时很少有需要使用with语句的情况，因为它的主要用途是节省一点代码。
大多数情况下，使用局部变量可以实现同样的效果，无须增加新作用域。

function updateBody() {
  with(document.body) {
    console.log(tagName);
    innerHTML = 'Hello World!';
  }
}
// with语句让使用document.body更简单了。使用局部变量也可以实现同样的效果
function updateBody() {
  let body = document.body;
  console.log(body.tagName);
  body.innerHTML = 'Hello World!';
}

虽然这段代码多了几个字符，但比使用with语句还更容易理解了，因为tagName和innerHTML属于谁很明确。这段代码还通过把document.body保存在局部变量中来省去全局查找。

28.2.2 选择正确的方法

1．避免不必要的属性查找

在计算机科学中，算法复杂度使用大O表示法来表示。
最简单同时也最快的算法可以表示为：常量值或O（1）。
稍微复杂一些的算法同时执行时间也更长一些。
下表列出了JavaScript中常见算法的类型：

常量值或O（1），指字面量和保存在变量中的值，表示读取常量值所需的时间不会因值的多少而变化。
读取常量值是效率极高的操作，因此非常快。
在JavaScript中访问数组元素也是O（1）操作，与简单的变量查找一样。
使用变量和数组相比访问对象属性效率更高，访问对象属性的算法复杂度是O（n）。
访问对象的每个属性都比访问变量或数组花费的时间长，因为查找属性名要搜索原型链。简单来说，查找的属性越多，执行时间就越长。
特别要注意避免通过多次查找获取一个值。
只要使用某个object属性超过一次，就应该将其保存在局部变量中。
第一次仍然要用O（n）的复杂度去访问这个属性，但后续每次访问就都是O（1），这样就是质的提升了。
只要能够降低算法复杂度，就应该：
尽量通过在局部变量中保存值来替代属性查找。
另外，如果实现某个需求既可以使用数组的数值索引，又可以使用命名属性（比如NodeList对象），那就都应该使用数值索引。

2．优化循环

优化循环的基本步骤如下：
（1）简化终止条件。因为每次循环都会计算终止条件，所以它应该尽可能地快。这意味着要避免属性查找或其他O（n）操作。
（2）简化循环体。循环体是最花时间的部分，因此要尽可能优化。要确保其中不包含可以轻松转移到循环外部的密集计算。
（3）使用后测试循环。最常见的循环就是for和while循环，这两种循环都属于先测试循环。do-while就是后测试循环，避免了对终止条件初始评估，因此应该会更快。
一个简单for循环为例：

for (let i = 0; i < values.length; i++) {
  process(values[i]);
}

// 假如顺序不重要，那么循环变量变为递减的形式
for (let i = values.length - 1; i >= 0; i--) {
  process(values[i]);
}

// 整个循环可修改为后测试循环
let i = values.length - 1;
if (i > -1) {
  do {
    process(values[i]);
  } while (--i >= 0);
}

这里主要的优化是将终止条件和递减操作符合并成了一条语句。
使用后测试循环时要注意：一定是至少有一个值需要处理一次。如果这里的数组是空的，那么会浪费一次循环，而先测试循环就可以避免这种情况。

3．展开循环

如果循环的次数是有限的，那么通常抛弃循环而直接多次调用函数会更快。
仍以前面的循环为例，如果数组长度始终一样，则可能对每个元素都调用一次process()效率更高。
如果不能提前预知循环的次数，那么或许可以使用一种叫作达夫设备（Duff’sDevice）的技术。

4．避免重复解释

重复解释的问题存在于JavaScript代码尝试解释JavaScript代码的情形。
在使用eval()函数或Function构造函数，或者给setTimeout()传入字符串参数时会出现这种情况。

// 对代码求值 NO
eval('console.log("Hello World!")');
// 创建新函数 NO
let sayHi = new Function('console.log(("Hello World!")');
// 设置超时函数 NO
setTimeout('console.log("Hello World!")', 500);

上面所列的每种情况下，都需要重复解释包含JavaScript代码的字符串。
这些字符串在初始解析阶段不会被解释，因为代码包含在字符串里。这意味着在JavaScript运行时，必须启动新解析器实例来解析这些字符串中的代码。实例化新解析器比较费时间，因此这样会比直接包含原生代码慢。
解决：
很少有情况绝对需要使用eval()，因此应该尽可能不使用它。此时，只要把代码直接写出来就好了。
对于Function构造函数，重写为常规函数也很容易。
调用setTimeout()时则可以直接把函数作为第一个参数。

// 直接写出来
console.log("Hello World!")
// 创建新函数：直接写出来
let sayHi =  function() {
  console.log("Hello World!")
}
// 设置超时函数： 直接写出来
setTimeout(function() {
  console.log("Hello World!");
}, 500);

为了提升代码性能，应该尽量避免使用要当作JavaScript代码解释的字符串。

5．其他性能优化注意事项

❑ 原生方法很快。应该尽可能使用原生方法，而不是使用JavaScript写的方法。原生方法是使用C或C++等编译型语言写的，因此比JavaScript写的方法要快得多。JavaScript中经常被忽视的是Math对象上那些执行复杂数学运算的方法。这些方法总是比执行相同任务的JavaScript函数快得多，比如求正弦、余弦等。
❑ switch 语句很快。如果代码中有复杂的if-else语句，将其转换成switch语句可以变得更快。然后，通过重新组织分支，把最可能的放前面，不太可能的放后面，可以进一步提升性能。
❑ 位操作很快。在执行数学运算操作时，位操作一定比任何布尔值或数值计算更快。选择性地将某些数学操作替换成位操作，可以极大提升复杂计算的效率。像求模、逻辑AND与和逻辑OR或都很适合替代成位操作。

28.2.3 语句最少化

语句的数量影响操作执行的速度。
一条可以执行多个操作的语句，比多条语句中每个语句执行一个操作要快。
那么优化的目标就是：寻找可以合并的语句，以减少整个脚本的执行时间。
为此，可以参考如下几种模式：

1．多个变量声明

声明多个变量时很容易出现多条语句。
使用一个let声明了所有变量，变量之间以逗号分隔。

2．插入迭代性值

任何时候只要使用迭代性值（即会递增或递减的值），都要尽可能使用组合语句。

// 两条语句都只有一个作用：
// 第一条从values中取得一个值并保存到name中，第二条递增变量i。
let name = values[i];
i++;
// 改进：
// 把迭代性的值插入第一条语句就可以将它们合并为一条语句：
let name = values[i++];

因为递增操作符是后缀形式的，所以i在语句其他部分执行完成之前是不会递增的。只要遇到类似的情况，就要尽量把迭代性值插入到上一条使用它的语句中。

3．使用数组和对象字面量

本书代码示例中有两种使用数组和对象的方式：构造函数和字面量。
使用构造函数始终会产生比单纯插入元素或定义属性更多的语句，而字面量只需一条语句即可完成全部操作。

28.2.4 优化DOM交互

DOM操作和交互需要占用大量时间，因为经常需要重新渲染整个或部分页面。
此外，看起来简单的操作也可能花费很长时间，因为DOM中携带着大量信息。
理解如何优化DOM交互可以极大地提升脚本的执行速度。

1．实时更新最小化

访问DOM时，只要访问的部分是显示页面的一部分，就是在执行实时更新操作。
之所以称其为实时更新，是因为涉及立即（实时）更新页面的显示，让用户看到。
每次这样的更新，无论是插入一个字符还是删除页面上的一节内容，都会导致性能损失。
这是因为浏览器需要为此重新计算数千项指标，之后才能执行更新。
实时更新的次数越多，执行代码所需的时间也越长。反之，实时更新的次数越少，代码执行就越快。

let list = document.getElementById('myList'),
    item;
for (let i = 0; i < 10; i++) {
  item = document.createElement('li');
  list.appendChild(item);
  item.appendChild(document.createTextNode(`Item ${i}`));
}

向列表中添加了10项。
每添加1项，就会有两次实时更新：
一次添加

let list = document.getElementById('myList'),
    fragment = document.createDocumentFragment(),
    item;
for (let i = 0; i < 10; i++) {
  item = document.createElement('li');
  fragment.appendChild(item);
  item.appendChild(document.createTextNode('Item ' + i));
}
list.appendChild(fragment);