性能优化

一、性能优化介绍

1.内容概要：

• 内存管理
• 垃圾回收与常见 GC 算法
• V8 引擎的垃圾回收
• Performance 工具
• 代码优化实例

2.JavaScript 内存管理介绍

• 内存：由可读写单元组成，表示一片可操作空间

• 管理：人为的去操作一片空间的申请、使用和释放

• 内存管理：开发者主动申请空间、使用空间、释放空间

• 管理流程：申请-使用-释放

3.JavaScript 中的垃圾

• JavaScript 中内存管理是自动的
• 对象不再被引用时是垃圾
• 对象不能从从根上访问到时是垃圾
• JavaScript 中的可达对象
  1. 可以访问到的对象就是可达对象（引用、作用域链）
  2. 可达的对象就是从根出发是否能够被找到
  3. JavaScript 中的根就可以理解为是全局变量对象

二、GC 定义与作用

• GC 就是垃圾回收机制的简写
• GC 可以找到内存中的垃圾、并释放和回收空间
• GC 里的垃圾是什么
  1. 程序中不再需要使用的对象
  2. 程序中不能够再访问到的对象
• GC 算法是什么
  1. GC 是一种机制，垃圾回收器完成具体的工作
  2. 工作的内容就是查找垃圾释放空间、回收空间
  3. 算法就是工作时查找和回收所遵循的规则
• 常见的 GC 算法
  1. 引用计数
  2. 标记清除
  3. 标记整理
  4. 分代回收

1.引用计数算法实现原理

1. 核心思想：设置引用数，判断当前引用数是否为0
2. 引用计数器
3. 引用关系改变时修改引用数字
4. 引用数字为 0 时立即回收

2.引用技术算法的优缺点：

1. 优点：
   1. 发现垃圾时能能立即回收
   2. 最大限度减少程序暂停（减少程序卡顿）
2. 缺点
   1. 无法回收循环引用的对象
   2. 时间开销大：需要维护引用数值的变化。

3.标记清除算法的实现原理

1. 核心思想：分标记和清除二个阶段完成
2. 遍历所有对象找标记活动对象
3. 遍历所有对象清除没有标记对象，抹掉原本的标记
4. 回收相应的空间

4.标记清除算法的优缺点：

1. 优点：
   1. 相对于引用计数解决循环引用的对象
2. 缺点：
   1. 空间碎片化，不能让空间得到最大化的使用，浪费空间。
   2. 不能立即回收对象

5.标记整理算法原理

1. 标记整理可以看做是标记清除的增强
2. 标记阶段的操作和标记清除一致
3. 清除阶段会先执行整理，移动对象位置

6.常见的GC算法总结

1. 引用计数
2. 标记清除
3. 标记整理

三、认识V8

• V8 是一款主流的 JavaScript 执行引擎
• V8 采用即时编译
• V8 内存设限（64bit 不超过 1.5G，32bit 不超过800M）

1. V8垃圾回收策略

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

2. V8 内存分配

1. V8 内存空间一分为二
2. 小空间用于存储新生代对象（32M | 16M）
3. 新生代指的是存活时间较短的对象

3.新生代对象回收实现

1. 回收过程采用复制算法 + 标记整理
2. 新生代内存区分为二个等大小空间
3. 使用空间为 From , 空闲空间为To
4. 活动对象存储于 From 空间
5. 标记整理后将活动对象拷贝至 To
6. From 与 To 交换空间完成释放
7. 回收细节说明
   1. 拷贝过程中可能出现晋升
   2. 晋升就是将新生代对象移动至老生代
   3. 一轮 GC 还存活的新生代需要晋升
   4. To 空间的使用率超过 25%

4.老生代对象的回收实现

1. 老生代对象说明：
   1. 老生代对象存放在右侧老生代区域
   2. 64 位操作系统1.4G，32位操作系统700M
   3. 老生代对象就是指存活时间较长的对象
2. 主要采用标记清除、标记整理、增量标记算法
3. 首先使用标记清除完成垃圾空间的回收
4. 采用标记整理进行空间优化
5. 采用增量标记进行效率优化
6. 细节对比
   1. 老生代区域垃圾回收使用空间换时间
   2. 老生代区域垃圾回收不适合复制算法

四、performance 工具

1.为什么要使用 performance ？

• GC 的目的是为了实现1内存空间的良性循环
• 良性循环的基石是合理使用
• 时刻关注才能确定是否合理·
• Performance 提供多种监控方式

2.Performance 使用步骤

• 打开浏览器输入目标地址
• 进入开发人员工具面板，选择性能
• 开启录制功能，访问具体界面
• 执行用户行为，一段时间后停止录制
• 分析界面中记录的内存信息

3.内存问题的外在表现

• 页面出现延迟加载或经常性暂停
• 页面持续性出现糟糕的性能
• 页面的性能随时间延长越来越差

4.界定内存问题的标准

• 内存泄漏：内存使用持续升高
• 内存膨胀：在多数设备上都存在性能问题
• 频繁垃圾回收：通过内存变化图进行分析

5.监控内存的方式

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

6.判断是否频繁的存在 GC

• GC 工作时应用程序是停止的
• 频繁且过长的 GC 会导致应用假死
• 用户使用中感知应用卡顿

7. Performance 使用

• Performance 使用流程
• 内存问题的相关分析
• Performance 时序图监控内存变化
• 任务管理器监控内存变化
• 堆快照查找分离 DOM

五、代码优化介绍

• Jsperf 使用流程
  • 使用GitHub 账号登录
  • 填写个人信息（非必须）
  • 填写详细的测试用例信息（title、slug）
  • 填写准备代码（DOM 操作时经常用到）
  • 填写必要有 setup 与 teardown 代码
  • 填写测试代码片段
• 慎用全局变量
• 缓存全局变量
• 通过原型对象添加附加方法
• 避开闭包陷阱
• 避免访问属性方法使用
• for 循环优化
• 最优的循环操作
  1. forEach、for、forin

六、性能优化二

地址：https://jsbench.me