JS性能优化
分类：javascript
ES新特性
- Symbol
- 我们通过Symbol创建的值都是独一无二的
- 对象可以将String和Symbol两种类型的值作为键
- Symbol可以避免对象属性名重复的问题
- 最主要的作用就是对象添加独一无二的属性名
- for...of
- 作为遍历所有数据结构的统一方式
- 可以用break关键词随时终止循环
- 实现Iterable接口是for...of的前提
JS性能优化
内存管理
- 内存管理介绍
- 内存：由可读写单元组成，表示一片可操作空间
- 管理：人为的去操作一片空间的身躯，使用和释放
- 内存管理：开发者主动申请空间、使用空间、释放空间
- 管理流程：申请——使用——释放
//申请 let obj = {} //使用 obj.name = 'uu' //释放 obj = null
垃圾回收与常见GC算法
- JavaScript中的垃圾
- JavaScript中内存管理是自动的
- 对象不再被引用时是垃圾
- 对象不能从根上访问到时是垃圾
- JavaScript中的可达对象
- 可以访问到的对象就是可达对象(引用、作用域链)
- 可达的标准就是从根出发是否能够被找到
- JavaScript中的根就可以理解为是全局变量对象
- GC定义与作用
- GC就是垃圾回收机制的简写
- GC可以找到内存中的垃圾、并释放和回收空间
- GC里的垃圾是什么
- 程序中不再需要使用的对象
- 程序中不能再访问到的对象
- GC算法是什么
- GC是一种机制，垃圾回收器完成具体的工作
- 工作的内容就是查找垃圾释放空间、回收空间
- 算法就是工作时查找和回收时所遵循的规则
- 常用GC算法
- 引用计数
- 标记清除
- 标记整理
- 分代回收
- 引用计数算法
- 核心思想：设置引用数，判断当前引用数是否为0
- 引用计数器
- 引用关系改变时修改引用数字
- 引用数字为0时立即回收
- 优点
- 发现垃圾时立即回收
- 最大限度减少程序暂停
- 缺点
- 无法回收循环应用的对象
- 时间开销大
- 标记清除算法
- 核心思想：分标记和清除两个阶段完成
- 遍历所有对象找标记活动对象
- 遍历所有对象清除没有标记对象
- 回收相应的空间
- 缺点
- 空间碎片化，不能让我们的空间得到最大化的使用
- 标记整理算法原理
- 标记整理可以看做是标记清除的增强
- 标记阶段的操作和标记清除一致
- 清除阶段会先执行整理，移动对象位置
V8引擎的垃圾回收
- V8是一款主流的JavaScript执行引擎
- V8采用即时编译
- V8内存设限
- V8垃圾回收策略
- 采用分代回收的思想
- 内存分为新生代、老生代
- 针对不同对象采用不同算法
- V8中常用的GC算法
- 分代回收
- 空间复制
- 标记清除
- 标记整理
- 标记增量
- V8内存分配
- V8内存空间一分为二
- 小空间用于存储新生代对象(32M | 16M)
- 新生代指的是存活时间较短的对象
- 新生代对象回收实现
- 回收过程采用复制算法 + 标记整理
- 新生代内存区分为二个等大小空间
- 使用空间分为From,空闲空间为To
- 活动对象存储于From空间
- 标记整理后将活动对象拷贝至To
- From与To交换空间完成释放
- 老生代对象存放在右侧老生代区域
- 64位操作系统1.4G,32位操作系统700M
- 老生代对象就是指存活时间较长的对象
- 老生代对象回收
- 主要采用标记清除、标记整理、增量标记算法
- 首先使用标记清除完成垃圾空间的回收
- 采用标记整理进行空间优化
- 采用增量标记进行效率优化
- 新旧细节对比
- 新生代区域垃圾回收使用空间换时间
- 老生代区域垃圾回收不适合复制算法
Performance工具
- 为什么使用Performance
- GC的目的是为了实现内存空间的良行循环
- 良性循环的基石是合理使用
- 通过Performance时刻监控内存
- Performance使用步骤
- 打开浏览器输入目标网址
- 进入开发人员工具面板，选择性能
- 开启录制功能，访问具体界面
- 执行用户行为，一段时间后停止录制
- 分析界面中记录的内存信息
- 内存问题的外在表现
- 页面出现延迟加载或经常性暂停
- 页面持续性出现糟糕的性能
- 页面的性能随时间延长越来越差
- 监控内存的几种方式
- 浏览器任务管理器
- Timeline时序图记录
- 堆快照查找分离DOM
- 判断是否存在频繁的垃圾回收
JS性能优化
- 如何精准测试JavaScript性能
本质上就是采集大量的执行样本进行数学统计和分析
-
使用基于 Benchmark.js的jsperf.com/ 完成
-
JSBench
作者：掘金-JS性能优化