转自：浅谈JavaScript事件循环_1rving的博客-CSDN博客
内容是渡一袁老师大师课：《WEB前端大师课》-学习视频教程-腾讯课堂 (qq.com)
所以JavaScript是单线程，事件循环的本质也就是一个消息队列，这是一个无线循环队列，只要队列中有任务就会被放入至渲染主线程中执行。
进程
首先我们了解一下浏览器的进程模型。那么何为进程？
进程：每个程序在运行时都需要有它自己专属的内存空间，我们可以简单的把这块内存空间理解为进程。
每一个应用都至少有一个进程，进程之间是相互独立的，即使要通信，也需要双方的同意。
线程
那么什么又是线程呢？
线程可以理解为进程下面的孩子，上面说的一个程序只要有一个进程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。
如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中又可以包含多个线程。
浏览器中有哪些进程和线程
浏览器实质上是一个多进程多线程的应用程序
浏览器在运行时为了避免相互影响，减少奔溃的几率，当启动浏览器后，他会自动启动多个进程。
可以打开浏览器的任务管理器查看当前的所有进程。
其中，最主要的进程有：
浏览器进程：
主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启用多个线程处理不同的任务。
网络线程
负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
渲染进程
渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML、CSS、JS代码。
默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之前不相互影响。
渲染主线程
下面围绕渲染进程来展开说明，到底是如何渲染的。
因为渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：
解析HTML
解析CSS
计算样式
布局
处理图层
每秒把页面刷新60次
执行全局JS代码
执行事件处理函数
执行计时器回调函数
....
为什么渲染进程不适用多个线程来处理这些事情？
虽然现在所有的计算机都拥有多核CPU，但是渲染进程通常只使用单线程来处理任务。因为如果使用多线程会带来一些问题，包括但不限于以下几点：
多线程竞争：如果先渲染过程中，多个线程同时修改同一个数据，就会发生竞争条件，导致数据不一致或者程序崩溃。在渲染进程中，有很多操作是需要修改DOM树、样式表等。这些操作如果使用多线程就会导致竞争条件。
多线程通信：多个线程之间需要共享数据或者通信，这需要额外的开销和复杂性，容易导死锁和性能问题。在渲染进程中，多个线程需要共享的数据非常多，例如DOM树、样式表、事件等，这些数据的共享和通信非常复杂。
多线程调度：多个线程的执行顺序需要调度，这需要额外的开销和复杂性，容易导致死锁和性能问题。在渲染进程中，多个线程的执行顺序需要调度，例如渲染线程需要等待布局线程和合成线程的数据才能开始工作，这些调度会导致性能下降。
所以，渲染进程不适用多个线程来处理任务，为了避免竞争条件、通信复杂性和调度开销等问题。相反，渲染进程采用单线程模型，通过事件循环机制来协调异步任务和同步任务的执行顺序，从而提高性能和稳定性。同时，为了充分利用多核CPU，现代浏览器会采用多进程模型。将渲染进程和其他进程分开，通过IPC通信机制来共享数据和调度任务，从而实现更高效的浏览器运行。
那么要处理这么多任务的话，主线程遇到了一个前所未有的难题：它是如何调度任务的？
比如：
我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
于是渲染主线程想出了一个绝妙的注意来处理这个棘手的问题：排队
- 最开始，渲染主线程会进入一个无限循环
- 在每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完后进入下一次循环；如果没有，则进入休眠状态。
- 其他所有线程（包括其他进程的线程），可以随时向消息队列添加任务。新任务会加到消息队列的末尾，在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务。
这样一来，就可以让每个任务都有条不紊的、持续的进行下去了。
这个过程，被称之为事件循环（消息循环）
异步
那么什么又是异步呢？
在代码执行过程中，会遇到一些无法立即处理的任务，比如：
计时完成后需要执行的任务--setTimeout、setInterval
网络通信完成后需要执行的任务 -- XHR、Fetch
用户操作后需要执行的任务 -- addEventListener
如果让渲染主线程等到这些任务的时机达到，就会导致主线程长期处于【阻塞】状态，从而导致浏览器【卡死】
但是渲染主线程就是浏览器和用户交互的命，它承担着极其重要的任务，它无论如何都不能阻塞！
想想用户遇到一个5秒异步任务，需要静静的在电脑面前等待5秒才能有反应的场景。。。
产品经理和用户都会带着刀来吧⚠️
所以，浏览器选择异步来解决这个问题，如下图所示，当遇到一个计时任务时，会立即开启一个计时线程，然后紧接着执行消息队列的下一个任务，当计时器结束后将回调函数放入消息队列末尾，依次排序进入渲染主线程中。
使用异步的方式，渲染主线程用不阻塞
如何理解JS的异步？
JavaScript是一门单线程的语言，因为他运行在浏览器的渲染主线程中，而渲染主线程只有一个。
而渲染主线程承担着诸多的任务，如渲染页面、执行JS都在其中运行。
如果使用同步的方式，就既有可能导致主线程产生阻塞，从而导致消息队列中很多其他任务无法得到执行。一方面导致繁忙的主线程白白消耗时间，另一方面导致页面无法及时更新，给用户造成页面卡死现象。
所以浏览器采用异步的方式来避免。具体做法时当某些任务发生时，比如计时器、网络、事件监听。主线程任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等到主线程调度执行。
在这种异步模式下，浏览器用不阻塞，从而最大限度的保证了单线程的流畅运行。
JS为何会阻碍渲染？
<h1>Zkiki hello world!</h1>
<button>change</button>
<script>
var h1 = document.querySelector('h1');
var btn = document.querySelector('button');
// 死循环指定的时间
function delay(duration) {
var start = Date.now();
while (Date.now() - start < duration) {}
}
btn.onclick = function () {
h1.textContent = 'Zkiki 你好世界！';
delay(3000);
};
</script>
用户点击btn按钮事件，执行了onclick事件，首先执行更改了h1的内容，然后执行delay函数，进入死循环3秒，此三秒由于JavaScript是单线程，所以无法执行其他任务(渲染页面)，等待3秒后，onclick方法全部执行完成，h1的内容才会在页面上更新。
那么任务会有优先级吗？
任务没有优先级，在消息队列中先进先出
但是消息队列是有优先级的
根据 W3C 的最新解释:
每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行HTML Standard
随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法
在目前 chrome 的实现中，至少包含了下面的队列：
- 延时队列：用于存放计时器到达后的回调任务，优先级「中」
- 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
- 微队列：用户存放需要最快执行的任务，优先级「最高」
添加任务到微队列 的主要方式主要使用的是Promise、MutationObserver
比如：
// 立即把一个函数添加到微队列
Promise.resolve().then(函数)
练习
setTimeout(function () {
console.log(1);
}, 0);
Promise.resolve().then(function () {
console.log(2);
});
console.log(3);
// 3 2 1
首先按照顺序执行setTimeout会加入到延时队列，Promise执行会加入到微队列，然后执行输入3，接着按照消息队列的优先级依次输入2和1
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);
首先按照顺序执行setTimeout加入延时队列，Promise执行会加入到微队列，然后执行输入5，接着执行为队列中a函数，输出a函数的1，再接着执行a函数中的Promise加入到为队列输出2，最后执行延时队列输出3
<body>
<button id="begin">开始</button>
<button id="interaction">添加交互任务</button>
<script>
// 死循环指定的时间
function delay(duration) {
var start = Date.now();
while (Date.now() - start < duration) {}
}
function addDelay() {
console.log('添加延时队列');
setTimeout(() => {
console.log('延时队列执行');
}, 100);
delay(2000);
}
function addInteraction() {
console.log('添加交互队列');
interaction.onclick = function () {
console.log('交互队列执行');
};
delay(2000);
}
begin.onclick = function () {
addDelay();
addInteraction();
console.log('===========');
};
</script>
</body>
