Javascript性能优化

内存优化的必要性

function fn(): void {
  const arrList = [];
  arrList[100000] = 'lg is a coder';
}
fn();

内存管理介绍

• 内存：由可读写单元组成，表示一片可操作空间
• 管理：人为地操作一片空间的申请、使用和释放
• 内存管理：开发者主动申请空间、使用空间、释放空间
• 管理流程：申请——使用——释放

JavaScript 中的内存管理

• 申请
• 使用
• 释放

let obj = {}; // 申请
obj.name = 'lg'; // 使用
obj = null; // 释放

JavaScript 中的垃圾回收

• JavaScript 中内存管理是自动的
• 对象不再被引用时是垃圾
• 对象不能从根上访问到时是垃圾

JavaScript 中的可达对象

• 可以访问到的对象就是可达对象（引用、作用域链）
• 可达的标准就是从根出发是否能够被找到
• JavaScript 中的根就可以理解为是全局变量对象

function objGroup(obj1, obj2) {
  obj1.next = obj2;
  obj2.prev = obj1;

  return {
    o1: obj1,
    o2: obj2,
  };
}

let obj = objGroup(
  {
    name: 'liubei',
  },
  {
    name: 'guanyu',
  },
);

console.log(obj);

GC 定义与作用

• GC 就是垃圾回收机制的简写
• GC 可以找到内存中的垃圾、并释放和回收空间

GC 里的垃圾是什么

• 程序中不再需要使用的对象

function func() {
  name = 'zhangfei';
  return `${name} is a coder`;
}

func();

• 程序中不能再访问的对象

function func() {
  const name = 'zhangfei';
  return `${name} is a coder`;
}

func();

GC 算法是什么

• GC 是一种机制，垃圾回收器完成具体的工作
• 工作的内容就是查找垃圾释放空间、回收空间
• 算法就是工作时查找和回收所遵循的规则

常见 GC 算法

• 引用计数

  • 核心思想：设置引用数，判断当前引用数是否为 0

  • 引用计数器

  • 引用关系改变时修改引用数字

  • 引用数字为 0 时立即回收

    const user1 = { age: 11 };
    const user2 = { age: 12 };
    const user3 = { age: 13 };
    
    const nameList = [user1.age, user2.age, user3.age];
    // 引用计数器为 1，因此 user123 均不会被清空
    
    function fn() {
      const num1 = 1;
      const num2 = 2;
    }
    
    fn(); // 执行结束后会清空 num1 num2 因为引用计数器为零
    

• 标记清除

• 标记整理

• 分代回收

引用计数算法的优点

• 发现垃圾时立即回收
• 最大限度减少程序暂停

引用计数算法的缺点

• 无法回收循环引用的对象
• 时间开销大

什么是标记清除算法

• 核心思想：分标记和清除两个阶段完成
• 遍历所有对象找标记活动对象
• 遍历所有对象清除没有标记对象
• 回收相应的空间

标记清除的优点

• 能标记所有可达对象
• 可以回收循环引用的对象

标记清除的缺点

• 空间碎片化，浪费空间

  回收的空间是不连续的

• 不会立即回收垃圾对象

• 清除的时候程序停止工作

什么是标记整理算法

• 标记整理可以看作是标记清除的增强
• 标记阶段的操作和标记清除一致
• 清除阶段会先执行整理，移动对象位置
• 不会立即回收垃圾对象

认识 V8 引擎

• V8 是一款主流的 JavaScript 执行引擎
• V8 采用即时编译
• V8 内存设限 1.5G bit (64位操作系统) 800M bit(32位操作系统)

V8 垃圾回收策略

• 采用分代回收的思想
• 内存分为新生代、老生代
• 针对不同对象采用不同算法

V8 中常用 GC 算法

• 分代回收
• 空间复制
• 标记清除
• 标记整理
• 标记增量

V8 中的新生代内存空间

• V8 内存空间一分为二
• 小空间用于存储新生代对象 (32M|16M)
• 新生代指的是存活时间较短的对象

新生代对象回收实现

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

V8 中的老生代内存空间

• 老声带对象存放在右侧老生代区域
• 1.4G | 700M
• 老生代对象就是指存活时间较长的对象

老生代对象回收实现

• 主要采用标记清除、标记整理、标记增量算法
• 首先使用标记清除完成垃圾空间的回收
• 采用标记整理进行空间优化
• 新生代晋升的时候会执行标记整理
• 采用标记增量进行效率优化
  1. 新生代区域垃圾回收使用空间换时间
  2. 老生代区域垃圾回收不适合复制算法

标记增量如何优化垃圾回收

Performance 工具介绍

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

使用步骤

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

内存问题的体现

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

界定内存问题的标准

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

监控内存的几种方式

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

任务管理器监控内存

采用事件绑定

var list  = document.querySelectorAll('li');

// 传统事件绑定方式
function showText(ev) {
  console.log(ev.target.innerHtml)
  for (let item of list) {
  	item.onClick = showText
  }
}

// 事件委托方式

var oUl = document.getElementById('ul');
oUl.addEventListener('click', showText, true)
function showText(ev) {
  var obj = ev.target
  if (obj.nodeName.toLowerCase() === 'li') {
    console.log(obj.innerHtml)
  }
}