js任务队列EventLoop

JS 执行机制

在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了，所以这个语言是单线程的但是随着HTML5到来js也支持了多线程webWorker 但是也是不允许操作DOM

单线程就意味着所有的任务都需要排队，后面的任务需要等前面的任务执行完才能执行，如果前面的任务耗时过长，后面的任务就需要一直等，一些从用户角度上不需要等待的任务就会一直等待，这个从体验角度上来讲是不可接受的，所以JS中就出现了异步的概念。

同步任务

代码从上到下按顺序执行

异步任务

1.宏任务
script(整体代码)、setTimeout、setInterval、UI交互事件、postMessage、Ajax

2.微任务
Promise.then catch finally、MutaionObserver、process.nextTick(Node.js 环境)

EventLoop

直接上例子简单易懂

示例

1.

Promise是异步任务 放入任务队列

2.

setTimeout 是异步任务 放入任务队列

3.

console.log 同步任务 立即执行

4.

开始执行异步任务队列中的宏任务 Promise 其下的console.log 是同步任务直接执行

​ 其下的setTimeout 是异步宏任务放入异步任务队列 排在上一个setTimeout后面(单线程，只能排队)

5.

开始执行异步任务队列中的宏任务 setTimeout 其下的console.log 是同步任务 立即执行

​ 其下的Promise.resolve().then() 是微任务 直接执行，后续如还有微任务也继续执行微任务 (清除宏任务下的所有微任务)

6.

微任务Promise.resolve().then() 下的console.log 是同步任务 立即执行

7.

终于到异步任务队列的最后一个宏任务了 setTimeout

​ 其下的console.log 是同步任务 立即执行