javascript性能优化三 之代码优化
代码优化介绍
如何精准测试Javascript性能
- 本质上就是采用大量的执行样本进行数学统计和分析
- 使用基于Benchmark.js的https://jsperf.com/完成
Jsperf使用流程
- 使用GitHub账号登录
- 填写个人信息（非必须）
- 填写详细的测试用例信息（title、slug）
- 填写准备代码（DOM操作时经常使用）
- 填写必要有setup与teardown代码
- 填写测试代码片段
Setup当前的一个前置准备工作，teardown是所有执行代码执行后要做的销毁的动作
慎用全局变量
为什么要慎用？
- 全局变量定义在全局执行上下文，是所有作用域链的顶端
- 全局执行上下文一直存在于上下文执行栈，直到程序退出
- 如果某个局部作用域出现了同名变量则会遮蔽或污染全局
第一种采用全局变量，第二种采用局部变量，然后用jsperf来比较一下两者的差异
结果可以看出全局的效果还是非常差的。
缓存全局变量
在程序执行过程中，有些地方的全局变量是不可避免的，可以将使用中无法避免的全局变量缓存到局部，比如当我们查找dom元素的时候，必须使用到document，但是document不是我们后面去定义的，是内置好了去使用的，这种情况下可以把大量需要重复使用的变量放置某个局部变量中，从而达到缓存的效果。
这里放没有js的html代码
结果可以看出，缓存过的代码稍微有点优势。
通过原型对象添加附加方法
在原型对象上新增实例对象需要的方法，把对象放在构造函数的内部和原型链上的对比
差别还是比较大的。。。以后还是尽量在原型链上增加方法吧。
避开闭包陷阱
关于闭包
- 闭包是一种强大的语法
- 闭包使用不当很容易出现内存泄漏
- 不要为了闭包而闭包
如果btn元素不存在了，但是el有一个引用关系，所以垃圾垃圾回收机制也不会回收
在下面把el置为null,可以释放这个dom的引用
避免属性访问方法使用
JavaScript中的面向对象
- JS不需属性的访问方法，所有属性都是外部可见的
- 使用属性访问方法只会增加一层重定义，没有访问的控制力
对比这两段代码，一个有属性的访问函数，一个直接使用对象中的属性
差距还是比较大的。。。下次不要提供访问方法了，直接用吧。。。
For循环优化
相差不多，但是当达到一定量的时候还是有差距的，可以选择length先获取到。
选择最优的循环方法
猜猜哪个效率高。。。
Foreach效率最高。其次for
节点添加优化
节点的添加操作必然会有回流和重绘
通过数值可以看出，文档碎片要快一点的。
克隆优化节点操作
差不多吧，用克隆来优化节点的操作稍微快一丢丢吧。。。
直接量替换Object操作