前言
进程
程序运行需要其专属的内存空间，可以把这块内存空间简单理解为进程。
下图每个颜色块都可视为一个应用，每个应用至少应有一个进程，进程之间相互独立，即使想要通信，也需要双方同意。
线程
有了进程后，就可以执行程序的代码了。运行代码的「人」称为「线程」。
一个进程至少有一个线程，一个程序开始运行后会自动开启一个线程，该线程称为主线程。
如果程序需要同时执行多块代码，主线程就会启动更更多的线程来执行代码。
浏览器是个多进程多线程的程序
为了避免相互影响，减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。
可以通过浏览器自带的任务管理器中查看当前的所有进程。
浏览器中主要的进程：
-
浏览器进程
主要负责界面显示（例如浏览器操作栏、主题…）、用户交互、子进程管理等。
-
网络进程
负责加载网络资源
-
渲染进程
渲染进程启动后，会自动开启
渲染主线程，主线程主要负责执行HTML、CSS、JS代码。默认情况下，浏览器会为每个标签页创建一个渲染进程，以保证每个标签页间互不影响。
注意：Chrome浏览器当前的默认模式仍为Process-per-Tab(一个标签页对应一个进程)，但Chrome官方说明文档中表示，未来会使用site-per-process模式(一个站点对应一个进程)，例如多个标签页访问同一站点，只会对应一个进程。
事件循环会发生在渲染进程的主线程中，那么渲染进程做了什么操作呢
事件循环
渲染主线程与事件循环
渲染进程的 主线程 中主要进行了如下处理：
- 解析 HTML
- 解析 CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画60次
- 执行全局 JS 代码
- 执行事件处理函数
- 执行定时器的回调函数
- …
为什么渲染进程不适用多个线程来分别处理如上事情
那么渲染主线程如何调度任务？例如
- 该线程正在执行 JS 函数，恰巧用户又触发了点击事件，那么二者执行的先后顺序该如何处理
- 浏览器进程通知渲染主线程，用户点击了按钮，恰好此时某个回调函数正要执行，又该如何处理
此时每个任务就需要排队，每个任务都会在消息队列中排队，当主线程中的任务执行完毕后，需要依次执行消息队列中的任务。
- 渲染主线程
初始会进入无限循环模式 - 每次循环都会查看消息队列中是否有待处理的任务，如果有则
取出队列中的第一个任务执行，执行完毕后再次循环，如果队列中没有任务，则主线程会进入休眠模式。 - 其他线程（包括其他进程的线程<例如浏览器进程中负责用户交互的线程>）可以随时向消息队列中添加任务，这个
新任务会添加到消息队列末尾，如果添加前消息队列中没有任务，那么会唤醒 渲染主线程 重新进入无限循环模式。
以上整个流程，称为事件循环，也叫消息循环。
同步带来的阻塞问题
以上说明为同步任务的执行方式，即每个任务执行完毕后再去执行下一个任务，但是
有些任务不是立即就执行的，例如定时器的回调函数、网络通信后的函数、用户操作后的函数…
如果让 渲染主线程 等待这些任务的时机到达后再去执行，就会导致 渲染主线程 长期处于阻塞状态，阻塞期间，主线程不会执行任何操作，给用户造成一种视觉上的卡死。
因此需要把这些任务变成异步任务
异步任务
渲染主线程处理异步任务时，不会等待其触发，而是通知计时线程开始计时，然后立即结束当前任务（继续去消息队列取下一个任务执行），计时线程计时结束后，会将异步任务的回调函数处理为一个新的任务，并放入消息队列末尾。
并非只有同步会造成阻塞
即使是异步任务也有可能造成阻塞，比如JS函数中等待但未进行运算。以下代码中，事件处理函数是异步的，点击按钮后可以发现3秒后页面内容才发生变化，给用户一种「卡死」的感受。
<h1>TianBenchu</h1>
<button>changeName</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 = '田本初'
delay(3000)
}
</script>
事件循环分析如下：
-
浏览器进程 中的交互线程捕捉到用户点击了按钮，将该事件的回调函数封装为一个任务添加到了消息队列的末尾，唤醒了渲染主线程的休眠模式（由于在此操作前消息队列中没有任务，所以渲染主线程进入了休眠模式）
-
渲染主线程 取出消息队列中的第一条任务来执行
-
渲染主线程 执行点击事件任务时，操作dom会产生绘制任务，然后执行delay函数，该函数会等待3秒，3秒后，点击事件任务结束。渲染主线程才会去消息队列取出绘制任务，所以页面内容没有立即发生改变。
任务的优先级
任务本身是没有优先级的，但是消息队列有优先级。
其实消息队列并不止一个，不同类型的任务会被排进不同的消息队列。
W3C 最新解释中，抛弃了原先 宏任务和微任务 的说法，而是：
- 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。 - 浏览器必须准备好一个
微队列，微队列中的任务优先所有其他任务执行，微队列 - 不再使用宏队列的说法
在目前Chrome的实现中，至少包含了如下队列：
微队列：存放需要最快执行的任务，优先级「最高」- 交互队列：用于存放用户交互的处理，优先级「高」
- 延时队列：用于存放定时器的回调，优先级「中」
验证没有宏队列说法
示例
<button id="begin">开始</button>
<button id="interaction">添加交互任务</button>
// 等待函数 期间不进行操作 以确保异步任务已经进入队列
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('===========')
}
点击开始按钮，看到控制台打印出「添加交互队列」后快速点击添加交互任务按钮，可以发现打印并非传统宏队列说法所述先入队列的任务先执行。
传统宏队列错误分析：
-
点击开始按钮，开始执行开始按钮的回调函数
-
先执行addDelay()，打印「添加延时队列」，处理定时器回调，将其交给计时线程开始计时
-
执行addDelay()中的delay(2000)，执行期间计时线程计时定时器的100毫秒已经到了，
定时器回调函数先进入宏队列，delay(2000)两秒后执行结束，至此addDelay()处理完毕 -
开始执行addInteraction()，打印「添加交互队列」，注册 添加交互任务按钮 的点击事件，delay(2000)开始等待两秒
-
等待的两秒期间触发 添加交互任务按钮 的点击事件，将回调函数封装为任务**
加入宏队列** -
两秒后addInteraction()结束，打印「===========」
-
开始按钮的回调函数执行完毕
-
渲染主线程去宏队列中寻找任务，按照其说法应该先打印「延时队列执行」再打印「交互队列执行」，但事实与其描述相反
分析正确流程：
-
渲染主线程开始处理全局JS，解析JS完毕，未触发任何函数
-
点击开始按钮，回调函数封装为任务加入交互队列，渲染主线程取出该任务开始执行
-
开始执行开始按钮的回调函数
-
先执行addDelay()，打印「添加延时队列」，处理定时器回调，将其交给计时线程开始计时
-
执行addDelay()中的delay(2000)，执行期间计时线程计时定时器的100毫秒已经到了，
定时器回调函数进入延时队列，delay(2000)两秒后执行结束，至此addDelay()处理完毕 -
开始执行addInteraction()，打印「添加交互队列」，注册 添加交互任务按钮 的点击事件，delay(2000)开始等待两秒
-
等待的两秒期间触发 添加交互任务按钮 的点击事件，将回调函数封装为任务**
加入交互队列** -
两秒后addInteraction()结束，打印「===========」
-
开始按钮的回调函数执行完毕
-
渲染主线程根据队列优先级，先执行交互队列中的任务并打印「交互队列执行」，再执行延时队列的任务并打印「延时队列执行」
上述案例可以证明，队列不止宏队列和微队列，传统宏队列的说法的不准确的，其实有很多队列，渲染主线程会根据他们的优先级，从中取出任务去执行。
添加任务到微队列
常见的方式如：Promise的then函数、MutationObserver
总结
- 由于浏览器复杂度急剧上升，原先宏任务与微任务的说法已经不适用，队列也不止宏队列和微队列两个，W3C不再使用宏队列的说法，但微队列仍存在。
- 不同类型的任务会进入不同的队列，渲染主线程根据队列优先级从队列中取出任务并执行。
- 但微队列中的任务优先级高于其他任何队列（包括绘制任务）。
- 任务没有优先级，但队列有。
事件循环面试题
一、如下代码输出
setTimeout(()=>{
console.log(1)
},1000)
Promise.resolve().then(()=>{
console.log(2)
})
console.log(3)
分析渲染主线程的执行顺序：
-
运行代码，
开始解析全局JS，从上至下依次执行代码 -
定时器部分代码执行完毕，将回调函数加入延时队列
-
进入Promise部分代码，执行后将其加入微队列
-
最后执行console.log(3)，同步代码直接打印。全局JS已经完全解析完毕，此时
全局JS任务结束 -
根据优先级去队列中寻找下一个执行任务 -
微队列中有任务，最先执行，即打印了2
-
渲染主线程执行完毕，再次根据优先级寻找待执行任务，此时找到了延时队列中的任务
-
执行延时队列中的任务，打印1
答案： 3 2 1
二、如下代码输出
function a() {
console.log(1)
Promise.resolve().then(function () {
console.log(2)
})
}
setTimeout(function () {
console.log(3)
Promise.resolve().then(()=>{
console.log(4)
})
}, 0)
Promise.resolve().then(a)
console.log(5)
分析渲染主线程：
-
运行代码，
开始解析全局JS，从上至下依次执行代码 -
定义函数a部分解析结束
-
定时器部分代码解析结束，将回调函数交给延时队列，延时队列将该函数处理为一个定时任务
-
Promise部分代码解析结束，将then中函数交给微队列，微队列会将该函数处理为一个微任务
-
解析console.log(5)，控制台打印5
-
至此
全局JS已经全部解析完毕
-
根据优先级寻找待执行任务，发现Promise微任务并执行 -
执行a函数，打印1，Promise.then是微任务，将其放入微队列
-
根据优先级寻找待执行任务，发现Promise微任务并执行，打印2
-
根据优先级寻找待执行任务，发现定时任务并执行，打印3，发现微任务，放入微队列
-
根据优先级寻找待执行任务，发现Promise微任务并执行，打印4
答案：5 1 2 3 4
总结
单线程是异步产生的原因
事件循环是异步的实现方式
如何理解异步
-
JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。 -
渲染主线程承担着诸多的工作，渲染页面、执行 JS、解析 HTML CSS… 都在其中运行。
-
使用
同步的方式，极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。 -
浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，
主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。 -
在这种
异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。
什么是JS的事件循环
-
事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。 -
在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
-
过去把消息队列简单分为
宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。 -
根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器根据队列优先级自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。
JS中的计时准确吗 为什么
不准确
- 计算机硬件没有原子钟，无法做到精确计时
- 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
- 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
- 受
事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
