写关于js的执行机制

这几天去面试，面试官都会问一些js执行机制

第一步宏任务执行，也就是script整体代码执行，把代码分为同步任务和异步任务，同步放在主线程里面执行，异步任务在event table中注册事件，等待主线程里面的代码执行完毕，才会回头来看event table里面有没有任务，如果有，就推进主线程里面。如下图所示：

 异步任务也有先后顺序，所以我们把他们分为宏任务和微任务

• 宏任务 包含整个script代码块，setTimeout, setIntval
• 微任务 Promise , process.nextTick

下面来玩玩实例： 

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

 执行结果是什么呢，我们来分析一下：

1.script整体代码执行，分同步任务，异步任务，这里注意的是new Promise是立即执行的，所以第一个阶段打印 1 3。

2.到微任务  .then 后面就是微任务，打印4

3.最后到宏任务setTimeout 打印 2   所以结果为1 3 4 2

下面再来复杂一点

console.log('1');
setTimeout(function() {  //time1
  console.log('2');
  setTimeout(function() {  //time3
    console.log('3');
  })
  new Promise(function(resolve) {
    console.log('4');
    resolve();
  }).then(function() {
    console.log('5')
  })
})
setTimeout(function() {  //time2
  console.log(6);
})
new Promise(function(resolve) {
  console.log(7);
  resolve();
}).then(function() {
  console.log(8)
})
   

1. 分析整体代码，相当一次宏任务，运行同步任务 打印 1 7

2.处理微任务，7 后面的.then是微任务，所以打印8

3.执行time1，打印2，又遇到一个宏任务time3，放在time2后面等着，发现new promise 立即执行 打印4，又发现一个微任务，.then ，打印5.没有微任务了，执行下一个宏任务time2

4.执行time2，打印6，没有发现微任务，执行下一个宏任务time3

5.执行time3 打印3

答案：1 7 8 2 4 5 6 3

经过两次思考，答案呼之欲出

js执行机制事件循环：

1、先执行主线程

2、遇到宏队列（macrotask）放到宏队列（macrotask）

3、遇到微队列（microtask）放到微队列（microtask）

4、主线程执行完毕

5、执行微队列（microtask），微队列（microtask）执行完毕

6、执行一次宏队列（macrotask）中的一个任务，执行完毕

7、执行微队列（microtask），执行完毕

8、依次循环。。。