前端面试之事件循环(event loop)、微任务和宏任务

一、JS的事件循环机制eventloop

1、 Eventloop是什么?

javascript中先分【同步和异步】，然后事件任务分为【宏任务和微任务】,  执行顺序是先执行微任务再执行宏任务。(异步顺序也是如此)

先执行主线程同步的微任务，发现异步之后，放入到异步队列中
然后执行同步的宏任务，宏任务执行完毕
执行刚才的异步任务。此顺序反复执行loop
宏任务：整体代码script,setTimeout, setInterval
微任务：Promise.then(非new Promise）

console.log('1');
setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})

输出：

主线程同步代码console.log(‘1’)
没有发现微任务，发现 setTimeout异步，加入宏任务Event Queue，第一轮事件循环走完
第二轮事件循环开始，先执行主线程同步代码console.log(‘2’)
new Promise同步执行console.log(‘4’),发现then，加入微任务Event Queue
没有宏任务了
接下来执行微任务执行Promise.then
微任务执行完毕，第二轮事件循环走完，事件循环结束
2、执行栈和队列

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

二、微任务和宏任务的区别

概念

1. 宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。

2. 微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。

3. 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。

js执行顺序，（先执行宏任务列，微任务队列），

运行机制

1. 在执行栈中执行一个宏任务。

2. 执行过程中遇到微任务，将微任务添加到微任务队列中。

3. 当前宏任务执行完毕，立即执行微任务队列中的任务。

4. 当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。

5. 渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）