学习笔记之事件循环-原理

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

起因

在前端的面试题中我们会遇到很多关于掺杂promise，setTimeout混入的面试题，然后很多人就会很混乱到底怎么做才是正确的，哪种方式去判断才是对的？开始的我也很困惑，所以到处找资料，但是最后还是百思不得其解。我以为是我过于愚钝，但当有一天我看到了袁老师的大师课中关于事件循环的原理课时，方才恍然大悟。

一、正题

我们要了解事件循环的原理要从浏览器的进程模型开始，首先要了解什么叫进程和什么叫线程。当看到这里时；很多人可能和我一样；are you kidding me？我一个前端管什么进程什么线程；这不是后端念叨的玩意儿吗？其实不然，你只要把它当做一个概念性东西去理解就好。

 一个程序，运⾏需要有它⾃⼰专属的内存空间，我们就可以把这块内存空间简单的理解 为进程；
 
一个应用，至少拥有一个进程，进程之间相互独立，通信需要同意；

当有了进程，代码要运行的时候，运行该代码的就称之为线程。

就好像35岁之后的我们进厂，每条流水线就相当于线程，线上的每个零件就是进程，各成一块。

⼀个进程⾄少有⼀个线程，所以在进程开启后会⾃动创建⼀个线程来运行代码，该线程称之为主线程。

 如果程序需要同时执⾏多块代码，主线程就会启动更多的线程来执⾏代 码，所以⼀个进程中可以包含多个线程。而我们的浏览器就是⼀个多进程多线程的应⽤程序。

其中，最主要的进程有：

1. 浏览器进程

主要负责界⾯显示、⽤户交互、⼦进程管理等。浏览器进程内部会启动多个 线程处理不同的任务。

2. ⽹络进程

负责加载⽹络资源。⽹络进程内部会启动多个线程来处理不同的⽹络任务。

3. 渲染进程（画重点）

渲染进程启动后，会开启⼀个渲染主线程(重点)，主线程负责执⾏ HTML、CSS、 JS 代码。 默认情况下，浏览器会为每个标签⻚开启⼀个新的渲染进程，以保证不同的 标签⻚之间不相互影响。

那我们开始进入重点部分了，渲染主线程怎么工作呢？渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：
1.解析 HTML
2.解析 CSS 计算样式
3.布局
4.处理图层 每秒把⻚⾯画 60 次
5.执⾏全局 JS 代码
6.执⾏事件处理函数
7.执⾏计时器的回调函数
…
要处理这么多的任务，主线程遇到了⼀个前所未有的难题：如何调度分配任务？

比如我这边正在执行全局js代码，突然有个定时器时间到了，我是继续执行全局还是先去处理定时器事件？就在我犹豫不决的时候，用户突然又点击切换页面了，我是先去处理用户页面还是继续处理定时器事件呢？

渲染主线程就想到了⼀个绝妙的主意来处理这个问题：排队

在最开始的时候，渲染主线程会进⼊⼀个⽆限循环；
每⼀次循环会检查消息队列中是否有任务存在。
如果有，就取出第⼀个任务 执⾏，执⾏完⼀个后进⼊下⼀次循环；
如果没有，则进⼊休眠状态。其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任 务会加到消息队列的末尾。
在添加新任务时，如果主线程是休眠状态，则会 将其唤醒以继续循环拿取任务。
整个过程，被称之为事件循环（消息循环）。

二、异步

1.什么叫异步？

当我们在写代码的时候，会遇到一些无法立即执行的任务，比如：

1.延时任务：计时完成后需要执⾏的任务—>setTimeout 、 setInterval;

2.通信任务：⽹络通信完成后需要执⾏的任务—>AJAX,Fetch;

3.交互任务：⽤户操作后需要执⾏的任务—>addEventListener。

如果让渲染主线程等待这些任务的时机达到，就会导致主线程⻓期处于 「阻塞」的状态，从⽽导致浏览器「卡死」 。但是渲染主线程尤为重要；决不能阻塞；就像我们兽人永不为奴一样。

所以我们使⽤异步的⽅式，渲染主线程永不阻塞。

2.任务优先级

任务有优先级吗？我猜很多人会说；当然有了，先微任务，后宏任务；

我开始也是这么认为的。

任务没有优先级，在消息队列中先进先出。

但消息队列是有优先级的

W3C 的最新解释：
1.每个任务都有⼀个任务类型，同⼀个类型的任务必须在⼀个队列，不同类型的任务可以分属于不同的队列。 在⼀次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。

2.浏览器必须准备好⼀个微队列，微队列中的任务优先所有其他任务执行。

在⽬前 chrome 的消息队列：

1. 微队列：⽤户存放需要最快执⾏的任务，优先级最高；（Promise）
2. 交互队列：⽤于存放⽤户操作后产⽣的事件处理任务，优先级其次；（addEventListener）
3. 延时队列：⽤于存放计时器到达后的回调任务，优先级中等。（setTimeout 、 setInterval）

我们前端一般都是在谷歌中进行调试页面；所以只要按照谷歌的消息队列去处理问题；基本就没什么问题了。

理论知识学完来做个几个习题

1.
setTimeout(function () {
  console.log(1);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});

console.log(3);

2.
// 死循环指定的时间
function delay(duration) {
  var start = Date.now();
   while (Date.now() - start < duration) {}
}

setTimeout(function () {
  console.log(1);
}, 0);

delay(3000);

console.log(2)

3.
function a() {
  console.log(1);
  Promise.resolve().then(function () {
    console.log(2);
  });
}
setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(a);

console.log(5);

面试题：
1.如何理解 JS 的异步？
JS是⼀⻔单线程的语⾔，这是因为它运⾏在浏览器的渲染主线程中，⽽渲染 主线程只有⼀个。
⽽渲染主线程承担着诸多的⼯作，渲染⻚⾯、执⾏ JS 都在其中运⾏。 如果使⽤同步的⽅式，就极有可能导致主线程产⽣阻塞，从⽽导致消息队列 中的很多其他任务⽆法得到执⾏。这样⼀来，⼀⽅⾯会导致繁忙的主线程⽩ ⽩的消耗时间，另⼀⽅⾯导致⻚⾯⽆法及时更新，给⽤户造成卡死现象。
所以浏览器采⽤异步的⽅式来避免。具体做法是当某些任务发⽣时，⽐如计 时器、⽹络、事件监听，主线程将任务交给其他线程去处理，⾃身⽴即结束 任务的执⾏，转⽽执⾏后续代码。当其他线程完成时，将事先传递的回调函 数包装成任务，加⼊到消息队列的末尾排队，等待主线程调度执⾏。 在这种异步模式下，浏览器永不阻塞，从⽽最⼤限度的保证了单线程的流畅 运⾏。

2.阐述⼀下 JS 的事件循环
事件循环⼜叫做消息循环，是浏览器渲染主线程的⼯作⽅式。
在 Chrome 的源码中，它开启⼀个不会结束的 for 循环，每次循环从消息 队列中取出第⼀个任务执⾏，⽽其他线程只需要在合适的时候将任务加⼊到 队列末尾即可。
过去把消息队列简单分为宏队列和微队列，这种说法⽬前已⽆法满⾜复杂的 浏览器环境，取⽽代之的是⼀种更加灵活多变的处理⽅式。
根据 W3C 官⽅的解释，每个任务有不同的类型，同类型的任务必须在同⼀ 个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级， 在⼀次事件循环中，由浏览器⾃⾏决定取哪⼀个队列的任务。但浏览器必须 有⼀个微队列，微队列的任务⼀定具有最⾼的优先级，必须优先调度执⾏。

3.JS 中的计时器能做到精确计时吗？为什么？
不⾏，因为：

1. 计算机硬件没有原⼦钟，⽆法做到精确计时
2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调⽤的 是操作系统的函数，也就携带了这些偏差
3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层， 则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时⼜带来 了偏差
4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运⾏，因此 ⼜带来了偏差。

---
# 总结
文字难掩瑕疵，视频更解心意。学习自袁进老师，视频：https://ke.qq.com/course/5892689#term_id=106109971