【面试】JS执行机制

参考：这篇文章的总结

由于JS有同步任务和异步任务，就形成了JS多线程的假象，可是JS是一门单线程语言！

JS的执行机制是根据事件循环的顺序。

宏任务和微任务

由于JS有同步任务和异步任务，为了了解执行机制，将任务细分为宏任务和微任务。

• macro-task(宏任务)：包括总体代码script，setTimeout，setInterval

• micro-task(微任务)：Promise，process.nextTick

宏任务和微任务还包括其余的，这里不赘述

事件循环

事件循环的顺序就是：

1. 进入总体代码(宏任务)后，开始第一次循环。
2. 接着执行全部的微任务。
3. 而后再次从宏任务开始，找到其中一个任务队列执行完毕
4. 再执行全部的微任务。

注意

第一次进入总体代码时，就将当即执行的执行了，有宏任务就放入宏任务队列，有微任务放入微任务队列。

此时有没执行的宏任务和微任务，可是由于刚刚执行了宏任务（总体代码），因此此次循环要执行微任务，而且每次执行微任务都要执行全部的微任务。

执行完此次全部的微任务，就循环去执行宏任务。记住除了第一次，之后再执行宏任务都只执行一个宏任务。

若是又有微任务，就再去循环执行全部的微任务……再去循环执行一个宏任务……执行全部的微任务……执行一个宏任务……

例子

举一个小例子

setTimeout(function() {
  console.log('setTimeout');
});

new Promise(function(resolve) {
  console.log('promise');
  resolve();
}).then(function() {
  console.log('then');
});
console.log('console');


复制代码

promise
console
then
setTimeout
复制代码

解析

1. 第一次循环总体代码（宏任务），new Promise当即执行，输出promise。

   console.log('console')也当即执行，输出console

   此次循环后宏任务队列有：setTimeout，

   微任务队列有：promise的.then

2. 第二次循环要执行全部的微任务了，即promise的.then，输出then

3. 第三次循环要执行一个宏任务了，即setTimeout，输出setTimeout

总结

只要记住

1. 循环执行全部的宏任务……执行一个微任务……全部的宏任务……一个微任务
2. 第一次循环执行的总体代码属于宏任务