简述JS执行机制 Event Loop

1.同步异步

JS是单线程的，由上至下排队执行任务代码。为了提高JS的性能又区分为 同步任务 和 异步任务。
同步任务队列可以称为主线程，异步任务队列称为 Event Table。

执行逻辑：

u=3412597542,1246962985&fm=26&gp=0.jpg

JS由上至下加载 > 判断任务是同步还是异步 > 同步任务立马执行，异步任务丢到 Event Table 内执行，将结果放到 Event Queue内(按照获取结果的顺序，并非进入 Event Table内的顺序) > 重复之前的逻辑直至主线程所有同步任务执行完毕 > 将 Event Queue内的回调按序抓取到主线程执行

console.log('同步任务开始执行')
setTimeout(function(){
    console.log('异步定时器执行了')
});
console.log('最后一个同步任务执行');

结果 ： 1.同步任务开始执行、2.最后一个同步任务执行、3.异步定时器执行了

2.微任务宏任务

判断下列代码执行逻辑

console.log(1);

setTimeout(function () {
    console.log(2)
}, 5000);

new Promise(function (resolve) {
    console.log(3);
    resolve();
}).then(function () {
    console.log(4)
}); 

setTimeout(function () {
    console.log(5)
}, 1000); 

new Promise(function (resolve) {
    console.log(6);
    resolve();
}).then(function () {
    console.log(7)
});

console.log(8);

结果：1、3、6、8、4、7、5、2

按照之前同步异步的逻辑，为什么结果不是：1、3、6、8、2、4、5、7 或者别的答案呢？Promise 和 setTimeout 都是异步任务啊？

是因为异步任务又分为 宏任务、微任务，两者执行机制导致的。
宏任务可以理解为运行环境提供的任务，目前我们常见的有浏览器和node。
微任务是由语言标准ECMAScript提供的。

1582362123(1).png

执行逻辑：

1424035-20180717204025092-991427971.png

Event Table 内有宏任务和微任务 > 遇到微任务执行然后下一个 > 遇到宏任务了，执行完后看看Event Table内有还没执行的微任务，有的话执行所有微任务 > 还有宏任务的话就执行，然后重复上一环节直至清空 Event Table > 主线程空闲了 > 输出所有微任务结果 > 输出所有宏任务结果

image

Event Loop

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。Event Loop是javascript的执行机制

Promise

Promise的函数体是同步任务 .then 回调是微任务