五分钟了解事件循环机制

事件循环的理解

js是单线程的，一个时间只能做一件事情。在js中我们把任务分为同步和异步两种。

同步和异步执行环境不同：

同步会进入到主线程，异步会进入到Event Queue。主线程中的任务执行完毕为空，会去Event Queue中读取对应的任务，并推到主线程中执行，上述过程的不断重复，我们称为Event loop。

下面先来看一个例子：

console.log('start');

setTimeout(() => {
    console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
    console.log('promise1');
}).then(() => {
    console.log('promise2');
}) 

console.log('end');

来猜一下输出顺序会是什么呢？

在浏览器控制台中输出为：start end promise1 promise2 setTimeout

为什么会这样呢？？

那是因为任务进入执行栈之后会判断一下是否是同步任务，若同步，就会进入主线程执行，异步任务就会到事件表里面注册回调函数到事件队列。

在事件循环中进行一次循环操作称作tick。每一次的tick任务处理模型是比较复杂的，总结步骤如下：

1. 在此次 tick 中选择最先进入队列的宏任务，如果有则执行；
2. 检查是否存在微任务，如果存在则不停地执行，直至清空Microtask Queue
3. 更新 render
4. 主线程重复执行上述步骤

 

1. 

宏任务和微任务: 会在同一个队列里面，只是执行顺序不同。

执行顺序: 宏任务 --> 执行所有的微任务 --> 新一轮宏任务 ...... 依次循环执行

宏任务（Macro Task）：整个script、setTimeout、setInterval、setImmediate

微任务（Micro Task）：promise的then方法、process.nextTick、MutationObserver

 

了解了上面的解释，我总算明白了，上面代码为啥那样输出了~