js语言性能优化以及相关概念理解

概要

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

内存管理

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

我们来看 js 语言是怎么做到这个流程

// 因为js没有提供申请内存的管理的api 所以当我们主动定义变量的时候js会主动给我们分配内存空间
// 申请
let obj = {};
//使用
obj.name = "wj";
// 同样js也没有提供api给我释放内存空间，下面只是模拟了释放内存空间
//释放
obj = null;

js 垃圾回收

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

可达对象

• 可以访问到的对象就是可达对象
• 可达的标准就是从根出发是否能被找到
• js 的根可以理解为全局变量

GC 算法介绍

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

引用计数算法原理介绍

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

const user = { anme: "q" };
function fn() {
  const name = "11";
}
fn();
//当fn执行完毕后，全局变量是无法找到fn函数内的name属性，此时name的引用数会变成0 回收掉，而user则不会被回收

优点：

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

缺点：

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

function foo(){
    const user1 = {}
    const user2 = {}
    user1.name = user2
    user2.name  user1
}
foo()
// 当函数执行完后，由于user1和user2循环引用，此时计数是不为0的，所以计数不能回收垃圾，因为函数已经执行完，user1和user2没有存在的必要了，所以造成了内存浪费

标记清除算法实现原理

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

优点：

• 可以解决对象循环引用的问题
  缺点：
• 会产生空间碎片化，不能是空间使用到最大化

标记整理算法

和标记清除算法很相似，只不过清除之前会整理标记的内容，然后再清除垃圾内容，可以使空间利用最大化

V8 引擎

• V8 采用即时编译
• V8 内存设限（64 位 1.5G 32 位 700M）
• v8 内存分为新生代和老生代
• v8 垃圾回收常见的 GC 算法（标记整理，增量标记，标记清除）

代码优化

• 慎用全局变量
  • 全局变量定义在全局执行上下文，是所有作用域的顶端
  • 全局执行上下文一直存在于上下文执行栈，直到程序退出
  • 如果某个局部作用域出现了同名变量则会遮蔽或者污染全局变量
• 缓存全局变量
  • 将无法避免使用的全局变量缓存在局部作用域中
• 通过原型新增方法
• 避开闭包陷阱（使用不当容易造成内存泄漏）
• 避免属性访问方法使用
• 选择最优的循环方式（ forEach性能最好>for>for in）
• 节点的添加

// 第一种
for (var i = 0; i < 10; i++) {
  var op = document.createElement("p");
  op.innerHTML = i;
  document.body.appendChild(op);
}
// 第二种 文档碎片添加
const frag = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
  var op = document.createElement("p");
  op.innerHTML = i;
  frag.appendChild(op);
}
document.body.appendChild(frag);

// 第二种性能更好一点