JS性能优化
内存管理
内存为什么要管理？
以下代码在语法层面没有什么问题，但是会发生内存泄露
// 使用如下代码开辟一块很大的内存
function fn(){
arrList = []
arrList[100000] = 'code'
}
fn()
- 内存：由可读写单元组成，表示一片可操作空间
- 管理：人为的去操作一片空间的申请、使用和释放
JavaScript中的内存管理
ECMAScript并没有提供相应的API，JavaScript的内存管理是自动的，定义变量时会自动分配空间，在后续的执行过程中，找不到引用关系时，就会回收空间。
JavaScript中的垃圾回收
- 什么是垃圾？
一般来说没有被引用的对象就是垃圾，就是要被清除， 有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。
GC算法
- GC是一种机制，垃圾回收器完成具体的工作
- 工作内容就是查找垃圾释放空间、回收空间
- 算法就是查找、回收所遵循的规则
常见的GC算法
- 引用计数
- 标记清除
- 标记整理
- 分代回收
引用计数
- 核心思想： 设置引用数，判断当前引用数是否为0
- 引用计数器
该算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收。
引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减 1，当这个值的引用次数变为 0 的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为 0 的值占用的内存。
引用计数无法回收循环引用的对象
标记清除算法
该算法设置一个叫做根root的对象，在Javascript里根是全局对象，垃圾回收器将定期从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象，以此不断向下查找。从根开始，垃圾回收器将找到所有可以获得的对象和收集所有不能获得的对象，这样便解决了循环引用的问题。所有现代浏览器都使用了标记清除垃圾回收算法，所有对JavaScript垃圾回收算法的改进都是基于标记清除算法的改进。
- 核心思想：分为标记和清除两个阶段
- 遍历所有对象标记活动对象
- 遍历所有对象清除没有标记对象
标记-清除有一个问题，就是在清除之后，内存空间地址是不连续的，即出现了内存碎片。如果后面需要一个比较大的连续的内存空间时，那将不能满足要求。
标记整理算法
标记整理可以看做是标记清除的增强，可以决标记清除后留下的内存碎片问题。
标记阶段的操作和标记清除一致
清除阶段会先执行整理，移动对象位置
常见GC算法总结
引用计数的优缺点
优点：
- 可以及时回收垃圾对象（只要引用计数为0，就回收）
- 减少程序卡顿时间（及时回收，不会出现内存占满的情况）
缺点： - 无法回收循环引用的对象（引用计数永远不为0）
- 资源消耗比较大，要频繁操作引用计数器。
标记清除的优缺点
可以回收循环引用的对象
容易产生碎片空间，浪费空间
不会立即回收垃圾对象（即使在遍历过程中发现垃圾对象，也不会立即回收）
标记整理的优缺点
减少碎片化空间
不会立即回收垃圾对象
V8引擎
V8是一款主流的JavaScript执行引擎，在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高性能。有了这些功能，JavaScript程序在V8引擎下的运行速度媲美二进制程序。V8支持众多操作系统，如windows、linux、android等，也支持其他硬件架构，如IA32,X64,ARM等，具有很好的可移植和跨平台特性。
V8-垃圾回收
采用分代回收，将内存分为两类：新生代、老生代，针对不同对象，采用不同算法。V8内存设有上限。
V8中常用的GC算法
- 分代回收
- 空间赋值
- 标记清除
- 标记整理
- 标记增量
V8内存分配
- 内存空间一分为二
- 小空间用于存储新生代对象 （x64--32M | x86--16M）
- 新生代指的是存活时间较短的对象
V8如何完成新生代对象的回收
- 回收过程采用复制算法和标记整理
- 将新生代内存区分为两个等大的空间
- 一个是使用空间-From，另一个是空闲空间-To
- 将活动对象存储到from
- 对from标记整理之后将活动对象复制到To空间
- From和To交换空间完成释放
回收细节说明：
- 拷贝过程中可能出现晋升
- 晋升就是将新生代对象移动至老生代
- 经过一轮GC还活着的新生代需要晋升
- 在拷贝过程中To空间的使用率超过25%，也需要存储到老生代
老生代对象说明
- 老生代对象存放在右侧老生代区域
- 它也有大小限制，64位操作系统1.4G，32位操作系统700M
- 老生代对象就是指存活时间较长的对象
老生代对象回收实现：
- 主要采用标记清除、标记整理、增量标记算法
- 实现使用标记清除完成垃圾空间的回收
- 如果需要将新生代对象移动至老生代，但是此时空间有不足的情况下，会触发标记整理对碎片空间进行优化
- 采用增量标记进行效率优化
标记增量如何让优化垃圾回收？
执行垃圾回收会阻塞程序的执行，标记增量就是将程序的执行和标记交替执行，而不是一口气执行标记，将很长的停顿时间，拆分成小的时间，用户体验更好。
image.png
Performance
Performance提供了多种监控方式
内存问题的外在表现
1、页面出现延迟加载或者经常性暂停（网络环境正常）
2、页面持续性出现糟糕的性能
3、页面的性能随时间延长越来越差
监控内存的方式
- 1、使用浏览器任务管理器（可以观察DOM节点内存变化、js堆内存变化）
2、时序图
3、堆快照 查找是否有分离dom
什么是分离DOM？
界面元素存活在DOM树上，:如果这个节点从当前的DOM树上进行了脱离，而且在js代码当中有人在引用的DOM节点，它称为分离状态的DOM节点
如何精准测试JavaScript性能
- 本质上就是采集大量的执行样本进行数学统计和分析
- 使用基于Benchmark.js的https://jsperf.com(服务器停止维护，不再使用，可以使用JSBench:https://jsbench.me/)完成
代码优化
1、慎用全局变量
为什么要慎用
- 全局变量定义在全局执行上下文，是所有作用域的顶端,局部查找不到最终都会去查找全局，这样子时间消耗是非常大的。
补充：JS在搜索变量的时候是先局部后全局，
var a=10;
(function(){
var a=20;
alert(a); //20
})()
var a=10;
(function(){
alert(a); //undefined
var a=20;
})()
// js中的变量是先解析然后再赋值，function中第一次搜索有a，值为undeifned
由于
- 全局执行上下文一直存在于上下文执行栈，直到程序退出，对于GC工作不利，GC发现变量还处于存活的状态，就不会把它当成垃圾进行回收。
- 如果某个局部作用域出现了同名变量会污染全局
2、缓存全局变量
我们在开发过程中，会无法避免使用到一些全局变量，这种情况下，我们可以把重复使用的全局变量放置到某个局部作用域中，从而达到缓存的效果。
比如我们查到dom要用到的document
function getBtn2(){
// 缓存变量
let obj = document
let oBtn1 = obj.getElementById('btn1')
let oBtn3 = obj.getElementById('btn3')
let oBtn5 = obj.getElementById('btn5')
let oBtn7 = obj.getElementById('btn7')
let oBtn9 = obj.getElementById('btn9')
}
3、通过原型对象添加附加方法
在原型对象上新增方法
var fn1 = function(){
this.foo = function(){//相当于在某个构造函数内部直接给所有的对象实例添加上了成员方法，后续再使用的过程中都可以拿到
console.log(11111)
}
}
let f1 = new fn1()
var fn2 = function(){}
fn2.prototype.foo = function(){//通过原型对象添加方法
console.log(11111)
}
let f2 = new fn2()
4、避开闭包陷阱
闭包使用不当很容易出现内存泄漏
5、避免属性访问方法的使用
JS不需要属性的访问方法，所有属性都是外部可见的
使用属性访问方法只会增加一层重定义，没有访问的控制力。
image.png
文档碎片性能优化
image.png
克隆优化节点
let newClone = node.cloneNode([deep])
- deep: 默认为false
- deep 为 true, 克隆元素及属性，以及元素的内容和后代
- deep 为 false, 只克隆元素本身，及它的属性
- 克隆始终不能克隆事件
image.png
