js执行机制详解

JavaScript执行机制详解如下。

1.javaScript是一门单线程语言 即 按照顺序当前事件完成才能进行下一件 。
首先我们知道 js中的代码从上往下执行 按照单线程的理解 如果中途某个事件发生异常就会造成堵塞 不进行下一事件 为了解决这个问题 引入了同步任务和异步任务的理念在同步任务执行结束后再进行异步任务 那具体是怎么实现的呢 。见下表。

2.Event Loop（事件循环）是javaScript的执行机制

（1）首先判断任务是同步任务还是异步任务 同步进入主线程运行，异步进入Event Table(事件列表)
（2）同步任务进入主线程就依次执行
（3）异步任务在event table中注册事件，当满足触发条件后（比如延时器的计时完成），被推入event queue(事件队列)
（4）主线程执行中同步任务执行结束后才会去event queue中查看是否有可执行的异步任务，如果有就推入下一次的主线程

至此，我们对js执行机制的总结为 从上往下执行 先同步后异步。

但除了广义的同步任务和异步任务，任务其实还有更精细的定义：
宏任务：setTimeout,setlnterval，ajax,DOM事件
微任务：Promise、async/await。
微任务执行时机比宏任务要早。

不同类型的任务中的异步任务进入对应的event queue中，比如计时器会进入宏任务的event queue,而Promise中then的回调函数会进入微任务的event queue。

那么js的执行机制到底是怎么样的？

1.从上述的宏、微任务分类中可知 同步任务只存在于宏任务中。所以一段代码执行时，会先执行宏任务中的同步任务。
2.进行第一轮事件循环的时候会把全部的js脚本当成一个宏任务来运行。
3.执行中遇到setTime和setIntval这种宏任务中的异步任务，那么就把这个任务推入到宏任务中的event queue里，在下一轮的宏任务中执行。
4.如果遇到微任务，在本轮任务中的同步代码都执行完成后，依次执行所有微任务。
5.当一轮事件循环中的同步任务和微任务执行结束后，开始第二轮的事件循环。
6.第二轮的事件其实就是第一轮宏任务中的异步任务，然后以这种执行机制循环往复。

1.主线程上宏任务、微任务执行顺序

console.log('---start---');//第一轮主线程
 
setTimeout(() => {
  console.log('setTimeout');  // 将回调代码放入个宏任务队列，第二轮宏任务执行
}, 0);
 
new Promise((resolve, reject) => {
  console.log('---Promise第一轮微任务同步执行---');//第一轮微任务同步执行
  resolve()
}).then(()=>{
  console.log('Promise.then实例成功回调执行'); // 将回调代码放入微任务队列，第一轮宏任务执行完后立即执行
});
 
console.log('---end---');//第一轮主线程结束

执行顺序：主线程 >> 主线程上创建的微任务 >> 主线程上创建的宏任务

2.宏任务中包含微任务

// 宏任务队列 1
setTimeout(() => {
  // 宏任务队列 2.1
  console.log('timer_1');
  setTimeout(() => {
    // 宏任务队列 3
    console.log('timer_3')
  }, 0)
  new Promise(resolve => {
    resolve()
    console.log('new promise')
  }).then(() => {
    // 微任务队列 1
    console.log('promise then')
  })
}, 0)
 
setTimeout(() => {
  // 宏任务队列 2.2
  console.log('timer_2')
}, 0)
console.log('========== Sync queue ==========')

执行顺序：主线程 >> 主线程上的宏任务队列1 >> 宏任务队列1中创建的微任务