关于浏览器:图解-Google-V8事件循环和垃圾回收学习笔记三

这是《图解 Google V8》第三篇 / 共三篇：事件循环和垃圾回收

这里次要讲了 2 点：

事件循环：宏工作和微工作
- 什么是微工作
- 微工作的执行机会
垃圾回收
- 垃圾回收运行过程
- 垃圾回收算法

通过这个专栏的学习，V8 不在是个生疏的黑盒了，变成了一个相熟的黑盒，因为这个专栏让你理解了 V8 的大抵原理，面试时吹吹牛皮还是能够的，不过也就仅此而已，细节方面还须要本人去深刻

同步回调函数是在执行函数外部被执行的
异步回调函数是在执行函数内部被执行的

UI 线程是运行窗口的线程，也叫主线程

当鼠标点击了页面，零碎会将该事件交给 UI 线程来解决，然而 UI 线程不能立刻响应来解决

针对这种状况，浏览器为 UI 线程提供了音讯队列，而后 UI 线程会一直的从音讯队列中取出事件和执行事件，如果以后没有任何音讯期待被解决，那么这个循环就会被挂起

在执行 setTimeout，浏览器会将回调函数封装成一个事件，增加到音讯队列中，而后 UI 线程会不间断的从音讯队列中取出工作，执行工作，在适合的机会取出 setTimeout 的回调函数

在 UI 线程执行 XMLHttpRequest，会阻塞 UI 线程，所以 UI 线程会将它调配给网络线程（是网络过程中的一个线程）：

UI 线程从音讯队列中取出工作，剖析
发现是一个下载工作，就会交给网络线程去执行
网络线程接到下载申请后，会和服务器建立联系，收回下载申请
网络线程一直从服务器接收数据
网络申请在收到数据后，会将返回的数据和回调函数封装成一个事件，放在音讯队列中
UI 线程循环读取音讯队列，如果是下载状态的事件，UI 线程就会执行回调函数
直到下载事件完结，页面显示下载实现

宏工作是音讯队列中期待被主线程执行的事件，每个宏工作在执行的时候都会创立栈，宏工作完结，栈也会被清空

微工作是一个须要异步执行的函数，执行机会是在主函数执行完结之后，以后宏工作完结之前

微工作执行的机会：

如果当前任务中产生了一个微工作，不会再以后的函数中被执行，所以执行微工作时，不会导致栈的有限扩张
微工作会在当前任务执行完结之前被执行
微工作完结执行之前，不会执行其余的工作

参考资料

V8 Promise 源码全面解读
JavaScript Event Loop vs Node JS Event Loop

带星号的函数配合 yield 能够实现函数的暂停和复原，这个叫生成器

function* getResult() {console.log("getUserID before");
  yield "getUserID";
  console.log("getUserName before");
  yield "getUserName";
  console.log("name before");
  return "name";
}

let result = getResult();

console.log(result.next().value);
console.log(result.next().value);
console.log(result.next().value);

在生成器外部，如果遇到 yield 关键词，那么 V8 将 yield 前面的内容返回给内部，并暂停函数的执行

生成器暂停后，里面代码开始执行，如果想要持续复原生成器的执行，就能够应用 result.next() 办法

在暂停和复原之间切换，这背地的原理是协程，协程是比线程更加轻量级，它是跑在线程上的工作

一个线程有多个协程，但只能执行一个协程，如果 A 协程启动 B 协程，那 A 协程就是 B 协程的父协程

应用生成器编写同步代码

function* getResult() {let id_res = yield fetch(id_url);
  console.log(id_res);
  let id_text = yield id_res.text();
  console.log(id_text);

  let new_name_url = name_url + "?id=" + id_text;
  console.log(new_name_url);

  let name_res = yield fetch(new_name_url);
  console.log(name_res);
  let name_text = yield name_res.text();
  console.log(name_text);
}
let result = getResult();
result
  .next()
  .value.then((response) => {return result.next(response).value;
  })
  .then((response) => {return result.next(response).value;
  })
  .then((response) => {return result.next(response).value;
  })
  .then((response) => {return result.next(response).value;
  });

把执行生成器代码的函数称为执行器（可参考驰名的 co 框架）

function* getResult() {let id_res = yield fetch(id_url);
  console.log(id_res);
  let id_text = yield id_res.text();
  console.log(id_text);

  let new_name_url = name_url + "?id=" + id_text;
  console.log(new_name_url);

  let name_res = yield fetch(new_name_url);
  console.log(name_res);
  let name_text = yield name_res.text();
  console.log(name_text);
}
co(getResult());

async 是异步执行并隐式返回 Promise 作为后果的函数。

await 前面能够接两种类型的表达式：

任何一般表达式
Promise 对象的表达式

如果 await 期待的是一个 Promise 对象，它会暂停执行生成器函数，直到 Promise 对象变成 resolve 才会复原执行，而后 resolve 的值作为 await 表达式的运算后果

function NeverResolvePromise() {return new Promise((resolve, reject) => {});
}
function ResolvePromise() {return new Promise((resolve, reject) => resolve("resolve"));
}
async function getResult() {let a = await NeverResolvePromise();
  console.log(a); // 不会输入
}
async function getResult2() {let b = await ResolvePromise();
  console.log(b); // "resolve"
}
getResult();
getResult2();
console.log(0);

async 是一个异步执行的函数，不会阻塞主线程的执行

async 函数在执行时，是一个独自的协程，能够用 await 来暂停，因为期待的是一个 Promise 对象，就能够用 resolve 来复原该协程

参考资料

学习 koa 源码的整体架构，浅析 koa 洋葱模型原理和 co 原理

通过 GC Root 标记内存中流动对象和非流动对象。
- V8 采纳可拜访性（reachability）算法判断堆中的对象是是否为流动对象
  - GC Root 可能遍历到的对象，是可拜访的（reachable），称为流动对象
  - GC Root 不能遍历到的对象，认为是不可拜访的（unreachable），称为非流动对象
- 浏览器环境中有很多 GC Root
  - window 对象（位于每个 iframe 中）
  - DOM，由能够通过遍历文档达到的所有原生 DOM 节点组成
  - 寄存栈上变量
回收非流动对象所占用的内存
回收后，做内存整理（可选，有些垃圾回收器不会产生内存碎片，比方副垃圾回收器）
- 回收完结后，内存中会呈现大量不间断的空间，这空间被称为内存碎片
- 如果内存碎片太多的话，当须要较大间断的内存时，就会呈现内存不足

V8 受代际假说影响，应用了两个垃圾回收器：主垃圾回收器 (Major GC)，副垃圾回收器（Minor GC）

代际假说：

大部分对象都是“朝生夕死”的，也就是说大部分对象在内存中存活的工夫很短，比方函数外部申明的变量，或者块级作用域中的变量，当函数或者代码块执行完结时，作用域中定义的变量就会被销毁。因而这一类对象一经分配内存，很快就变得不可拜访
不死的对象，会活得更久，比方：window、DOM、Web API 等

V8 把堆分为两个区域：

新生代：寄存生存工夫短的对象
- 容量小，1~8M
- 应用副垃圾回收器（Minor GC）
- 应用 Scavenge 算法，将新生代区域分成两局部
  - 对象区域 (from-space)
  - 闲暇区域 (to-space)
    1. 对象区域放新退出的对象
    2. 对象区域快满的时候，执行垃圾清理（先标记，再清理）
    3. 清理的把流动对象复制到闲暇区域，并且排序（闲暇区域就没有内存碎片了）
    4. 复制完之后，把对象区域和闲暇区域进行翻转
    5. 反复执行下面的步骤
    6. 通过两次垃圾回收后还存在的对象，挪动到老生代中
老生代：寄存生存工夫久的对象
- 容量大
  - 对象占用空间大
  - 对象存活工夫长
- 应用主垃圾回收器（Major GC）
- 应用标记 – 革除算法（Mark-Sweep）
  - 标记：从根元素开始，找到流动对象，找不到的就是垃圾
  - 清理：间接清理垃圾（会产生垃圾碎片）
- 或者应用标记 – 整顿算法（Mark-Compact）
  - 标记：从根元素开始，找到流动对象，找不到的就是垃圾
  - 整顿：把流动对象向同一端挪动，另一端间接清理（不会产生垃圾碎片）

参考资料

Understanding Garbage Collection and hunting Memory Leaks in Node.js
深刻了解 Node.js：核心思想与源码剖析
When and How JavaScript garbage collector works
V8 引擎的内存治理
Trash talk: the Orinoco garbage collector

JavaScript 是运行在主线程上的，一旦执行垃圾回收算法，JavaScript 会暂停执行，等垃圾回收结束后再复原执行，这种行为成为全进展（Stop-The-World）

V8 团队向现有的垃圾回收器增加并行、并发、增量等垃圾回收技术

这些技术次要从两方面解决垃圾回收效率的问题：

将一个残缺的垃圾回收工作拆分成多个小的工作
将标记对象、挪动对象等工作转移到后端线程进行

在主线程执行垃圾回收的工作时，开启多个帮助线程，同时执行回收工作

采纳并行回收，垃圾回收所耗费的工夫 = 辅助线程数 * 单个线程所耗费的工夫

在执行垃圾标记的过程中，主线程不会同时执行 JavaScript 代码，因而代码不会扭转回收过程

假如内存状态是动态的，因而只有确保同时只有一个辅助线程在拜访对象就好了

这是 V8 副垃圾回收器采纳的策略

它在执行垃圾回收的过程中，启动多个线程来负责新生代中的垃圾清理，同时将对象空间中的数据挪动到闲暇区域，这操作会导致数据地址变了，所以还须要同步更新这些对象的指针

将标记工作合成为更小的块，穿插在主线程不同的工作之间执行

采纳增量回收，垃圾回收器没必要一次执行实现的垃圾回收流程，每次执行的只是一小部分工作

增量回收是并发的，须要满足两点要求：

垃圾回收能够随时被暂停和重启，暂停的时候须要保留扫描后果，期待下一次回收
在暂停期间，被标记好的垃圾数据，如果被批改了，垃圾回收器须要正确的解决

在垃圾回收的时候，V8 应用三色标记法：

彩色：示意所有能拜访到的数据（流动数据），且子节点曾经都标记实现
红色：示意还没有被拜访到，如果在一轮遍历完结还是红色，这个数据就会被回收
灰色：示意正在解决这个节点，且子节点还没被解决

垃圾回收器会依据有没有灰色的节点来判断这一轮遍历有没有完结

没有灰色：一轮遍历完结，能够清理垃圾
有灰色：一轮遍历还没完结，从灰色的节点继续执行

标记为彩色的数据被批改了，也就是说彩色的节点援用了一个红色的节点，然而彩色的节点是曾经实现标记的，这是它前面还有一个红色的节点是不会被标记为彩色的

这就须要一个约束条件：不能让彩色节点指向红色节点

这个约束条件是：写屏障机制（Write-barrier）：

当产生彩色节点援用红色节点，写屏障机制会强制将这个红色节点变为灰色的，从而保障彩色节点不能指向红色节点

这种办法被称为强三色不变性

在主线程执行 JavaScript 时，辅助线程在后盾执行垃圾回收操作

长处：主线程不会被挂起（JavaScript 能够自在执行，同时辅助线程能够执行垃圾回收）

但有两点导致它很难实现：

主线程执行 JavaScript 时，堆中的内容随时会变动，就会使得辅助线程之前的工作白做
主线程和辅助线程可能会在同一时间去批改同一个对象，这就须要额定实现读写锁的性能

《图解 Google V8》设计思维篇——学习笔记（一）
《图解 Google V8》编译流水篇——学习笔记（二）

关于浏览器:图解-Google-V8事件循环和垃圾回收学习笔记三

17 | 音讯队列：V8 是怎么实现回调函数的？

setTimeout

XMLHttpRequest

18 | 异步编程（一）：V8 是如何实现微工作的？

19 |异步编程（二）：V8 是如何实现 async/await 的？

生成器 Generator

async/await

20 | 垃圾回收（一）：V8 的两个垃圾回收器是如何工作的？

21 | 垃圾回收（二）：V8 是如何优化垃圾回收器执行效率的？

并行回收（在主线程执行，全进展）

增量回收（在主线程执行，穿插在各个工作之间）

并发回收（不在主线程执行）

《图解 Google V8》学习笔记系列

Just My Socks（注册教程内含优惠码）

关于浏览器:图解-Google-V8事件循环和垃圾回收学习笔记三

17 | 音讯队列：V8 是怎么实现回调函数的？

setTimeout

XMLHttpRequest

18 | 异步编程（一）：V8 是如何实现微工作的？

19 |异步编程（二）：V8 是如何实现 async/await 的？

生成器 Generator

async/await

20 | 垃圾回收（一）：V8 的两个垃圾回收器是如何工作的？

21 | 垃圾回收（二）：V8 是如何优化垃圾回收器执行效率的？

并行回收（在主线程执行，全进展）

增量回收（在主线程执行，穿插在各个工作之间）

并发回收（不在主线程执行）

《图解 Google V8》学习笔记系列

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）