JS性能优化（一）

一. 性能测试工具：Jsperf（以下代码执行都用此工具）

地址：https://jsperf.com/

二. JS性能优化方式

1. 慎用全局变量

（1）原因：

1）全局变量定义在全局执行上下文，是所有作用域的顶端

（若需查找此变量，则需找到作用域最顶端，浪费时间，降低性能）

2）全局执行上下文一直存在于上下文执行栈，直到程序退出

（到程序退出时才能被GC执行，影响内存）

3）如果某个局部作用域出现同名变量，则会遮蔽或污染全局变量

（2）示例：

（2）执行：

（4）结果：

（5）结论：全局变量性能低于局部变量

2. 缓存全局变量

（1）实现方式：将无法避免的全局变量缓存到局部变量中

（2）示例：

定义如下元素，访问button

（3）执行：

（4）结果：

（5）结论：把全局变量缓存为局部变量，可以提高js性能

3. 通过原型链新增方法（同1、2步，进行简单演示）

（1）示例

（2）执行：

（3）结果：

（3）结果： 通过原型链新增方法能提高js性能

4. 减少闭包使用

（1）原因：

1）闭包特点：外部具有指向内部的引用；在外部作用域能访问内部作用域的数据

2）闭包使用不当会造成内存泄露

（2）举例：

var el = document.getElementById('btn')

上行代码中，对el进行一次引用，el.onclick处又进行一次引用（现共两次），当调用foo()时，只摧毁了el的一次引用，此时根据GC的引用计数法规则来看，el不能被回收，一直占用内存，影响性能。

（3）解决：

将el变量置为null,根据GC引用计数法来看，此时el引用次数为0,即被回收，释放内存，提高性能。

5. 避免属性访问方法

（1）原因：

1）JS中的面向对象，不需要属性的访问方法，所有的属性都是外部可见的

2）使用属性的访问方法，只会增加一层重定义，没有访问的控制力

（2）举例：

上图中定义了Person函数中，age成员变量的访问函数：this.getAge，并通过此函数来方位age

上图直接通过属性来访问age

（3）执行：

（4）结果：

（5）结论：直接通过属性访问成员变量，比通过属性方法访问性能更快。