任务队列如何执行，事件循环执行流程，全网最精简易懂解答（保懂）

（这问题保懂吗？我能让你看没用的博客吗）

1、同步和异步任务

首先要搞清楚哪些是同步任务，哪些是异步任务。

同步任务：

会竟然有序依次向下执行的，例如console,条件判断语句，循环语句等等。

异步任务：

分为宏任务和微任务，宏任务会被添加到宏任务队列，微任务添加到微任务队列。

（1）宏任务：事件处理函数，定时器，ajax请求，script标签

（2）微任务：promise实例的then方法，await关键字

2、宏任务队列和微任务队列

还要明白任务队列分为宏任务队列和微任务队列，以及他们是按什么顺序执行队列中的任务。

宏任务队列：

解析js时，将解析到的宏任务添加至宏任务队列，

但宏任务队列的执行是没有顺序之分的，哪个任务先调用完成就执行哪个任务，

比如有一个5秒的定时器先加入进来的，但是有后加入进来一个2秒的定时器，那么2秒的定时器先调用完成，就先执行，所以是无序的

微任务队列：

将解析到的微任务依次添加到微任务队列的后排，在执行时按顺序依次执行，

说人话，谁先找到加入进来的，执行的时候谁先出去

3、同步任务、微任务和宏任务的执行流程 

事件循环：

在解析js代码时，将同步任务，宏任务，微任务划分出来的这个过程，说人话，把这三种代码找出来分成三堆儿，我要一堆儿一堆儿吃

先要了解一个执行顺序，同步任务---微任务---宏任务 

具体流程：

• 解析script标签开始第一次事件循环，先执行同步任务再执行微任务，找到宏任务会把宏任务丢进宏任务队列中，执行完第一次事件循环的同步任务和微任务，开始去宏任务队列中找先调用完成的宏任务，解析这个宏任务，开始第二次事件循环
• 第二次（同步任务---微任务---宏任务丢进队列中）
• 第n次（同步任务---微任务---宏任务丢进队列中）

光听我说还是不易理解，直接给你上图上代码，还不懂我倒立敲两斤代码

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

new Promise(function (resolve) {
  console.log(5)
  resolve()
}).then(function () {
  console.log(6)
})
setTimeout(function () {
  console.log(7)
  new Promise(function (resolve) {
    console.log(8)
    resolve()
  }).then(function () {
    console.log(9)
  })
})
console.log(10)

//1 5 10 6 2 3 4 7 8 9