JavaScript 性能优化
简单概要
- 内存管理
- 垃圾回收与常见 GC 算法
- V8 引擎的垃圾回收
- Performance 工具
- 代码优化栗子
内存管理
简单叙述内存，下面是一个小 code
function fn() {
arr = []
arr[1000000] = 'hellow'
}
fn()
// 如果不是很了解内存机制，就有可能编写出这样的代码，内存是持续升高，并没有回落，蓝色线条
内存管理介绍
- 内存：由可读写单元组成，表示一片可操作空间
- 管理：人为的去操作一片空间的申请、使用和释放
- 内存管理：开发者主动申请空间、使用空间、释放空间
- 管理流程：较为简单，申请-使用-释放、
// 申请
let obj = {}
// 使用
obj.name = 'zhang'
// 释放
obj = {}
垃圾回收
- JavaScript 中内存管理是自动的
- 对象不再被引用时是垃圾
- 对象不能从根上访问到时是垃圾
实际上 JavaScript 的垃圾回收其实就是找到这个垃圾，让 JavaScript 的执行引擎来进行空间的释放和回收。
GC 垃圾是什么
- GC就是垃圾回收机制的简写
- GC可以找到内存中的垃圾、并释放和回收空间
- 程序中不再需要使用的对象以及程序中不能再访问到的对象就是 GC 的垃圾
GC 算法是什么
- GC是一种机制，垃圾回收器完成具体的工作
- 工作的内容就是查找垃圾释放空间、回收空间
- 算法就是工作时查找和回收所遵循的规则
常见 GC 算法
- 引用计数
- 标记清除
- 标记整理
- 分代回收
一、引用计数算法。
核心思想：设置引用数，判断当前引用数是否为0
引用计数器
引用关系改变时修改引用数字
引用数字为0时立即回收
const user1 = {age: 11}
const user2 = {age: 22}
const user3 = {age: 33}
const nameList = [user1.age, user2.age, user3.age]
function fn(){
const num1 = 1
const num2 = 2
}
fn()
当上述代码 fn() 执行完毕后，由于 num1 和 num2 加上了 const 声明，所以外部访问不到，这时 num1 和 num2 身上的引用计数会变成 0，当引用计数为 0时，GC就会把他当成垃圾回收掉，而 user123，因为被数组 nameList 引用着，所以不会被回收。
引用计数算法优点：【发现垃圾时立即回收】【最大限度减少程序暂停】
缺点：【无法回收循环引用的对象】【时间开销大】
二、标记清除算法。
核心思想：分标记和清除两个阶段完成
阶段一：遍历所有对象找标记活动对象
阶段二：遍历所有对象清除没有标记对象
回收相应的空间
标记清除算法优点：【可以解决循环引用不能回收问题】
缺点：【会产生空间碎片化问题，不能让空间得到最大化使用】
V8 引擎
- V8 是一款主流的 JavaScript 执行引擎
- V8 采用即时编译
- V8 内存设限
垃圾回收策略
- 采用分代回收
- 内存分为新生代、老生代
- 针对不同对象采用不同算法
回收策略图
以及 V8 常用的 GC 算法，因为 V8 是设有内存上限，所以采用分代回收思路，不同代的对象采用更适合的 GC 算法
- 分代回收
- 空间复制
- 标记清除
- 标记整理
- 标记增量
V8 内存分配
- V8 内存空间一分为二
- 小空间用于存储新生代对象（32M|16M）
- 新生代指的是存活时间较短的对象
V8 回收新生代对象
- 回收过程采用复制算法 + 标记整理
- 新生代内存区分为二个等大小空间
- 使用空间为 From，空闲时间为 To
- 活动对象存储于 From 空间
- 标记整理后将对象拷贝至 To
- From 与 To 交换空间完成释放
V8 老生代对象存放区域
- 老生代对象存放在右侧老生代区域
- 64 位操作系统 1.4 G，32 操作系统 700M
- 老生代对象就是指存活时间较长的对象
老生代对象回收实现
- 主要采用标记清除、标记整理、增量标记算法
- 首先使用标记清除完成垃圾空间的回收
- 采用标记整理进行空间优化
- 采用增量标记进行效率优化
Performance 监控面板
- 可以使用 chrome 的开发人员工具面板，选择性能
- 开启录制功能，访问具体界面
- 执行用户行为，一段时间后停止录制
- 分析界面中记录的内存信息
一、内存问题的外在表现（假设网络情况正常）
- 页面出延迟加载或经常性暂停（可能伴随着频繁垃圾回收出现，在于有些代码瞬间让程序爆炸）
- 页面持续性出现糟糕的性能（内存膨胀，指的是当前界面为了达到最近使用速度，会申请内存空间，但是这个内存空间大小超过了设备本身所提供的大小）
- 页面的性能随时间延迟越来越差（内存泄露）
二、监控内存的几种方式
- 浏览器任务管理器
- Timeline 时序图记录
- 堆快照查找分离 DOM
- 判断是否存在频繁的垃圾回收
