面试官：说说浏览器中的事件循坏机制（event-loop）-六虎

在这之前，咱们先来了解一下什么是事情循环机制，为什么有事情循环机制，以及后边将会合作标题带小伙伴们彻底搞明白事情循环机制，以后面试碰到这类标题再也不怕啦～

为什么有事情循环机制

由于JavaScript是一种单线程言语，意味着只能一次履行一个使命。当页面上产生多个事情时，如用户点击事情、网络恳求完结事情等，这些事情将会形成一个使命行列。假如依照使命行列的次序顺次履行，时刻较长的使命会阻塞后续的使命履行，导致页面无法呼应用户的操作，乃至产生假死现象。所以，为了处理这一系列状况，便规划出了事情循环机制。
事情循环机制通过将使命分解为离散的事情并依照必定的次序履行，使浏览器能够有效地处理多个事情，并在履行异步操作时不阻塞主线程的履行，处理了JavaScript单线程履行的限制，然后确保页面的呼应性和用户体验。

浏览器中的事情循坏机制

下面这张图为事情循环机制大致模型图：

在浏览器中，除了JS引擎之外，还有WebAPIs。这些WebAPIs是由浏览器提供的功能接口，用于与浏览器环境进行交互，例如操作DOM、发起网络恳求、定时器等。

当JS履行栈履行到同步使命会直接履行，而履行到相关异步使命（DOM操作、鼠标点击事情、滚轮事情、AJAX网络恳求、setTimeout等），它将会把这些使命委托给相应的WebAPI进行处理，然后当即持续履行下面的代码，而不会等候WebAPI的操作完结。而一旦WebAPI操作完结（如定时器结束、网络恳求完结等），它会将相应的回调函数添加到异步使命行列中，然后等候事情循环的处理。

其间，异步使命行列中的使命（也便是异步使命）主要能够分为两类:宏使命(Macrotask)和微使命(Microtask)。

宏使命（Macrotask）是一类较大粒度的使命，它们通常包含以下几种：

script（js全体代码）
AJAX网络恳求
setTimeout()
setInterval()
setImmediate()
I/O
UI-rendering

微使命（Microtask）是一类较小粒度的使命，履行时刻较短。常见的微使命包含：

Promise的回调函数，如.then()，.catch()，.finally()等
MutationObserver
Process.nextTick()
在async函数中使用await等候的使命完结后，后边紧接的代码块都将推入微使命行列

所以依照这个异步使命的划分，事情循环的履行进程能够分为以下几个进程：

履行大局同步代码，进入到script标签，就归于履行了第一次宏使命，进入到了第一次事情循环
当履行栈遇到同步代码，当即履行；当遇到一些异步宏使命代码（setTimeout，AJAX网络恳求等），在WebAPI操作完结后（定时器结束，网络恳求完结等），它会依据履行快慢将相应的回调函数顺次添加到宏使命行列中；而当遇到异步微使命代码（Promise的回调函数等），JS引擎内部则会直接添加到微使命行列中。
履行栈不会等候WebAPI的操作完结，会持续往下履行完一切同步代码，当履行栈为空，当时宏使命履行结束，当即履行微使命行列里边的一切微使命，若没有微使命，则持续下面进程
事情循环的上述进程履行结束后，会查看是否需求从头烘托页面。假如需求，将履行从头烘托的操作。
履行宏使命，从宏使命行列中取出一个使命压入履行栈中进行履行。（这也叫下一轮事情循环的敞开）
从进程2开端，重复后续进程，直到宏使命行列为空

这么说可能有点不好懂，直接来个流程图更加直观一点：

在每次事情循环时，事情循环会先履行一个宏使命，等该宏使命履行结束后，当即查看微使命行列并履行其间的一切微使命，直到微使命行列为空。然后再进行下一个宏使命的履行。这样的次序确保了微使命鄙人一个宏使命之前履行，然后能够实现及时更新页面状况等需求。

看到这儿信任咱们对事情循环机制现已有必定的认知了。那现在我先拿一道简略的标题，给咱们练练手：

console.log('start');
setTimeout(()=>{
    console.log('setTimeout');
},0)
new Promise((resolve, reject) => {
    console.log('Promise');
    resolve()
}).then(() => {
    console.log('then1');
}).then(() => {
    console.log('then2');
})

//start Promise then1 then2 setTimeout

信任各位聪明的小伙伴们都现已做出来呢~咱们通过上面事情循环的履行进程来剖析一下：
1、履行栈碰到console.log('start')为同步代码，当即履行，打印出start

2、持续往下履行，遇到setTimeout异步宏使命代码，js将它交给Web APIs处理，处理完结后Web APIs将setTimeout事情的回调函数添加到宏使命行列中。

3、js将setTimeout交给Web APIs后，当即持续往下履行，碰到new Promise()，是同步代码，当即履行里边的console.log('Promise')，打印Promise，然后持续履行resolve()，Promise状况为resolved，再持续履行Promise的.then()回调函数，这是异步微使命代码，直接将其回调函数添加到微使命行列中。代码持续履行，又是promise的.then()回调函数，将其回调函数添加到微使命行列中。

4、到这儿履行栈为空，当时宏使命履行结束，当即查看微使命行列并履行其间的一切微使命，直到微使命行列为空。当时微使命行列有两个Promise.then()回调函数，按行列先进先出次序，顺次压入履行栈中履行，先后履行 console.log('then1')，console.log('then2')，先后打印成果then1，then2。

5、微使命行列为空，且不需求从头烘托页面，履行宏使命，从宏使命行列中取出一个使命压入履行栈中进行履行（敞开下一轮事情循环）。这儿将宏使命行列的setTimeout事情的回调函数压入履行栈履行 console.log('setTimeout')，打印成果setTimeout，该宏使命结束，当即查看微使命行列发现为空，持续下面进程，宏使命行列也为空，此刻事情循环进行事情等候状况。

通过这么一剖析，咱们的成果是不是很快就出来啦~

在这儿不知道有没有小伙伴和我相同有疑问，那个定时器我设置的不是0s吗，可是为什么它那么晚才履行出来呢，假如那个0s不是它应该被履行出来的时刻，那这个时刻的效果是什么呢?

不知道有多少小伙伴和我相同，以为定时器的计时是JS引擎干的，其实不是，当JS履行栈履行到定时器的时候，会将它无脑推给Web Apis，而从它被推给Web Apis的那一刻，是Web Apis开端计时。所以咱们计时器参数填的那个时刻，比方1s,其实是交给web APIs进行计时，然后到达1s才把计时器的回调函数推入宏使命行列，所以计时器这个1s其实是它从Web apis到宏使命行列所要的时刻，实际履行它要的时刻最少需求1s，得它前面的微使命和宏使命悉数履行完，它才干履行。所以，当有多个定时器，网络恳求，以及其它一些异步宏使命时，在Web Apis里边先履行完结的，会先被推入宏使命行列中。

如下图：

到这儿是不是瞬间感醒悟了，那咱们再来一道标题：

console.log('script start')
async function async1() {
await async2()  //
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
}
async1()
setTimeout(function() {
console.log('setTimeout1')
}, 1000)
setTimeout(function() {
    console.log('setTimeout2')
    setTimeout(function() {
        console.log('setTimeout22')
        }, 100)
}, 500)
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})
console.log('script end')

答案如下：

// script start
// async2 end
// Promise
// script end
// async1 end
// promise1
// promise2
// setTimeout2
// setTimeout22
// setTimeout1

不知道这题小伙伴们有没有都做出来呢？信任现已熟练掌握了的小伙伴们肯定很快就得出案啦。仍是按上面事情循环进程的进程，咱们再来剖析一遍：
1、同步代码console.log('script start')直接打印成果script start。

2、代码持续履行，履行到async1()函数调用，当即履行，然后在函数里边又履行到await async2() ，履行async2()函数调用，console.log('async2 end')打印成果async2 end，async2()函数履行完结出栈，可是由于async2()函数前面加了await，所以在履行完async2()后，它后边紧接的代码块不再持续履行，而是都将推入微使命行列中，也便是console.log('async2 end')被推入微使命行列中。

3、持续往下履行，履行栈碰到两个定时器，将它们的回调函数都加入宏使命行列中。

4、碰到new Promise()，是同步代码，当即履行里边的console.log('Promise')，打印Promise，然后持续履行resolve()，Promise状况为resolved，后边紧跟着两个.then()回调函数，都将其添加到微使命行列中。

5、持续履行，碰到同步代码console.log('script end')，当即履行打印成果script end

6、到这儿，当时宏使命履行结束，履行栈为空，此刻使命行列如下图，微使命行列要悉数履行，顺次履行先后打印成果async1 end、promise1、promise2、

7、微使命行列为空，且不需求从头烘托页面，履行宏使命，从宏使命行列中取出一个使命压入履行栈中进行履行（敞开下一轮事情循环）。这儿将宏使命行列的setTimeout事情的回调函数压入履行栈履行，碰到同步代码直接履行，打印成果setTimeout2，持续履行碰到setTimeout异步宏使命，将其交给web apis处理，持续往下，宏使命结束，履行栈为空，履行一切微使命，没有微使命，再从宏使命行列中取出一个使命压入履行栈中进行履行（敞开下一轮事情循环）。此刻使命行列为下图，由于后边加的定时器比第一个延时时刻1000ms的定时器先履行完，所以先加入宏使命行列。重复上述进程，最终会顺次打印成果setTimeout22、setTimeout1。

做完这两道标题，小伙伴们有没有觉得事情循环机制很简略鸭~

最终给小伙伴们留一个标题，欢迎小伙伴们把自己的想法和答案打在谈论区喔❤️❤️❤️~

async function f1 () {
    console.log('f1 start')
    await f2() 
    console.log('f1 end') //微使命2
}
async function f2 () {
    console.log('f2')
}
console.log('script start')
setTimeout(() => {
    console.log('setTimeout1')
}, 1000) 
Promise.resolve().then(() => { //微使命1
    console.log('promise1')
    setTimeout(() => {
    console.log('setTimeout')
}, 500)
})
f1()
let promise2 = new Promise((resolve) => {
    resolve('promise2.then')
    console.log('promise2')
})
promise2.then((res) => { //微使命3
    console.log(res)
    Promise.resolve().then(() => {
        console.log('promise3')
    })
})
console.log('script end')

总结

在事情循环中，当履行栈为空时，事情循环会从事情行列中取出一个宏使命（最开端便是script标签，js全体代码），将其压入履行栈中履行。履行宏使命期间，假如生成了微使命，这些微使命会被添加到微使命行列中，等候当时宏使命履行结束后当即履行，直到将微使命行列里的一切微使命悉数履行，才进行下一个宏使命的履行，然后一直重复之前的进程，直到宏使命行列也悉数履行完，履行栈进行等候事情状况。这便是所谓的事情循环机制。

假如觉得文章对您有所协助的话，费事给小米露点点重视，点点赞咯，假如文章哪里有不对的当地，欢迎各位小伙伴谈论喔~

面试官：说说浏览器中的事件循坏机制（event-loop）

为什么有事情循环机制

浏览器中的事情循坏机制

总结

相关文章

Framework大合集，从里到外分析的明明白白（上）

kubectl获取命名空间下所有configmap集合的方法

关于iOS定时器你需要知道的一切

效能平台-研发篇（四）—— Istio故障排查技巧

作者信息