1-2-3（上）js性能优化

1.js优化概述
1.1内存管理
1.2垃圾回收和常见GC算法
1.3V8引擎的垃圾回收
1.4Performance工具
1.5代码优化实例

2.js内存管理
性能一路升高 导致 内存泄漏

内存：可读写单元组成，表示一片可操作空间
管理：开发者主动去操作一片空间的申请、使用和释放

申请内存空间 let bb = {}
使用内存空间 bb.name = 'hzj'
释放内存空间 bb = null

3.js的垃圾回收
js的内存管理是自动的
对象不再被引用时是垃圾
对象不能从根上访问时是垃圾(语法或者结构上无法访问)

可达对象 可以访问到的对象
从跟触发能否被找到
根理解为全局对象   
let obj = {name: 'aa'}
let all = obj;
obj = null;
aa可达

4.GC算法介绍
GC 垃圾回收的间歇
GC 可以找到内存在的垃圾 并释放和回收空间
1.程序中不再使用的对象
2.不能再访问到的对象

算法就是工作时查找和回收所遵循的规则
包含：
	引用计数
	标记清除
	标记整理
	分代回收

5.引用计数
设置引用数，判断当前引用数是否为0
当引用关系改变就修改引用数字
有引用关系指向对象空间则+1 少一个则-1

不再调用作用域内的对象引用计数器会清零，即方法调用完，里面的内部变量的计数器变为0；

6.引用计数的优缺点
优点： 发现垃圾立即回收
最大限度减少程序暂停 内存快慢的时候 清除垃圾（计算器为0的时候）

缺点：无法回收循环引用的对象    对象之前的循环引用，即ab互相引用的时候  他们的引用关系始终至少大于0     即部分垃圾对象势必热不到
	  时间开销大     时刻监控对象的引用计数器															资源利用过大

7.标记清除算法
7.1遍历所有对象，标记活动对象 找到所有可达对象，进行标记，局部对象不可达
7.2遍历所有对象，清除没有标记对象，清除标记对象的标记
7.3回收垃圾空间 空闲列表

8.标记清除优缺点
优点：可以清除互相循环引用的对象
缺点：地址不连续，回收的空间是分散的、碎片的，如果新的生成空间多了或者少了就不合适，空间不能最大化使用

9.标记整理算法实现原理 V8引擎
标记清除的增强操作
标记整理的标记部分和上面一样
标记清除的时候会先整理空间 把活动对象移动 将垃圾空间避免大批量碎片化空间的产生

10.常见GC算法总结
引用计数 通过计数器判断回收 可以及时回收，减少程序卡顿 无法回收循环引用的对象 资源消耗大（计数器）
标记清除 可以回收循环回收引用的空间 不能空间最大化利用 不能立即回收垃圾对象
标记整理 解决空间碎片化 单但不会立即回收垃圾对象

11.V8
主流的js执行引擎
特点
1.优秀的内存管理系统
2.即时编译
3.V8内存设限

12.V8垃圾回收策略
分代回收的思想
内存分为 新生代 老生代
针对不同代采用不同的GC算法
常用GC算法：
1.分代回收
2.空间的复制
3.标记清除
4.标记整理
5.标记增量

13.V8回收新生代对象
内存空间一分为二
小空间用于存储新生代对象 即存活时间较短的对象（局部作用域的对象）

复制算法和标记整理算法
两个等大空间
使用空间From    空闲空间To
活动对象存储From空间
From空间满了后  标记整理将活动对象拷贝至To空间
From空间完成释放  与TO空间交换空间

拷贝时可能出现晋升
晋升是新生代对象移植老生代
	一轮GC还存活的新生代需要晋升
To空间的使用率超过25%的时候就需要晋升

14.V8回收老生代对象
老生代对象存放在右侧老生代区域
老年代对象指存活时间长的对象

标记清除 标记整理  增量标记
先标记清除完成垃圾空间的回收    虽然有空间碎片  但提速明细
晋升的时候，老生代空间不太够就触发标记整理算法   进行空间优化
采用增量标记进行效率优化

不同：
新生代 =》空间换时间
老生代垃圾回收不适合复制算法   因为对象多 复制耗时长

垃圾 --\ 程序执行							执行	  执行		 执行				执行
回收 --/				遍历对象进行标记		 标记		标记		完成清除
						老年代对象				{ 增	量	标	记     }
															
增量标记：
	程序执行完空隙进行标记增量   即程序执行和标记增量交叉操作    实际耗时合理   

15.垃圾回收总结
内存设置上限 1.为浏览器设置 足够使用 2.垃圾回收机制 大了回收时间会长
分代回收思想 分新生代和老生代

16.Performance工具介绍 （性能）
GC的目的为了实现内存空间良性使用
判断内存过程使用是否合理
时刻关注内存情况
Performance提供多种监控方式

蓝色线条内存的变化

17.内存问题的外在体现
1.页面出现延迟加载和经常性暂停 抛开网速原因 可以判断出 底层出现 频繁的垃圾回收 出现
有一些代码让内存瞬间爆掉

2.页面持续性出现糟糕的性能  ：内存膨胀
	为了一定的速度申请额外的内存空间
	
3.页面的性能随时间延长越来越差：内存泄漏
	随着时间 内存空间越来越少

18.监控内存的几种方式
分析
1.内存泄漏 内存使用持续升高 走势图持续走高
2.内存膨胀 设备的性能问题或者程序的问题，控制变量法，用多种设备测试
3.频繁垃圾回收 内存的变化图来分析

工具
1.浏览器任务管理器
2.Timeline时序图记录  
3.堆快照查找分离DOM
	
判断是否存在频繁的垃圾回收

19.任务管理器监控内存
shift + esc 调出任务管理器
第一列的 内存 DOM占据的内存 如果这个持续增大 说明不断创建新DOM
js内存 js的堆括号里的值 可达对象占用的值
它只能看出变化有没有问题
但看不出具体问题

20.堆快照查找分离DOM
界面元素存活在DOM树上
垃圾对象时的DOM节点 从当前DOM树上脱离 无人引用的DOM节点
分离状态时的DOM节点 从DOM树上脱离，但还有引用 看不见但存在 =》 内存泄漏

可以通过浏览器的 内存里的堆快照操作查询问题     deta

21.判断是否存在频繁GC
GC工作时应用程序是停止的
频繁且过长 的GC会导致引用假死
用户使用会感知到卡顿

1.Timeline时序图 走势图中频繁的上升下降
2.任务管理器中的数据频繁的增加减小

22.Performance总结
1.使用流程
2.内存问题的相关分析
3.时序图监控内存变化
4.任务管理器监控内存变化
5.堆快照查找分离DOM

23.代码优化介绍
如何精准测试js性能
本质上是采集大量的执行样本进行数学统计和分析

基于Benchmark.js的  jsperf网站  在线王炸统计分析 

1.填写详细测试用例
2.填写准备代码
3.填写setup和teardown代码
4.填写测试代码片段

24.慎用全局变量
1.全局变量定义在全局执行的上下文，是所有作用域链的顶端
2.全局执行上下文一直存在上下文执行栈，直到程序退出 降低程序内存的使用
3.如果局部作用与出现同名变量 汇编污染

25.缓存全局变量
将使用中无法避免的全局变量缓存到局部
将大量使用的全局变量缓存到局部作用域

26.通过原型对象添加附加方法
1.原型对象
2.构造函数
3.实例对象

在原型对象上新增实例对象需要的方法

27.避开闭包陷阱
foo（）{
var name
fn(){
name…
}
}

a=foo()
a()

闭包是一种强大的语法 ，使用不当会导致内存泄漏
外部对内部有引用   跨作用域调数据
这样导致部分变量无法被回收    内存泄漏

el =null  需要及时释放空间

28.避免属性访问方法的使用
js不需要属性的访问方法，所有属性在外部是可以见的
使用属性访问方法只会增加一层重定义，没有访问的控制力
总而言之 就是没必要

29.For循环的优化操作
for(var i=0;i<arr.length;i++)

下面这个好  有效率
for(var i=0,len=arr.length;i<len;i++)

30.采用最优循环方式
arry.forEach(function (item){
console.log(item)
}) 最快

for(;;)  最慢
 
for in  只比最慢 快一点

31.节点的添加优化
节点操作的优化
1.每产生一个元素增加到body
2.将产生的所有body放到一个容器 再加入body 会快一些

32.克隆节点的优化操作
1.每产生一个元素增加到body
2.将产生的所有body放到一个容器 再加入body 会快一些

33.直接量 替换Object操作
var a = [1, 2, 3] 这个快 直接量

var a1 = new Array(3)
a1[0] = 1
a1[1] = 2
a1[2] = 3

34.原型添加方法
Person.prototype.say()={}

这种方法当new多个对象的时候  因为say是调用同一个地址  所以这个效率更高


方法里面做一些访问属性的操作
person = {
	this.id = id;
	this.say = {
		
	}
}

这种方法调用次数少的时候  它每产生一个对象实际是开辟一个新的空间  每一个say都是独立的