js异步之宏任务（marcroTask）和微任务（microTask）

什么是宏任务和微任务

宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务比宏任务的执行时间要早

使用异步的场景

1. 定时任务：setTimeout，setInverval
2. 网络请求：ajax请求，动态加载
3. 事件绑定

加载示例：

事件绑定示例：

同步阻塞示例：

console.log(1000)
alert(200)
console.log(3000)

上面就是同步阻塞示例，你不点击alert确认窗口，不会打印3000

js绝大部分都是同步；

同步异步问题

首先，你要知道javascript是单线程语言。js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着，但是，假如我们需要浏览新闻，但新闻包含的超清图片加载很慢，总不能网页一直卡着直到图片完全出来，所以将任务设计成了两类：

1.同步任务
2.异步任务

同步进入主线程 异步进入Event Table(这里存放的是微任务)当微任务全部完毕后，Event Table会将这个函数移入任务队列(Event Queue)，同步执行完毕，就会去任务队列去找,
任务队列是遵守先进站先出站,进入主线程

上述过程会不断重复，也就是常说的Event Loop（事件循环）。

但是，JS异步还有一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入任务队列（event queue），然后再执行微任务，将微任务放入微任务队列（micro task queue），但是，这两个queue不是一个queue。当你往外拿的时候先从微任务队列里拿这个回调函数，然后再从宏任务的queue拿宏任务的回调函数，如下图：

三、执行顺序

 //请写出输出内容
 //同步执行是从上到下执行的
  async function async1() { //同步执行调用的函数 
       console.log('async1 start'); //第二个打印 同步操作
       await async2(); //await等待 后面是一个promise对象 调用async2
       console.log('async1 end');//第六个打印 同步操作
   }
   async function async2() { 
       console.log('async2'); //第三个打印 执行调用async2的函数 
   }
   
   console.log('script start'); //第一个打印 同步操作先执行
   
   setTimeout(function() { //      异步操作定时器是宏任务放入Event Queue
       console.log('setTimeout'); //第八个打印 
   }, 0)
   
   async1(); //同步函数调用 执行16行调用的函数
   
   new Promise(function(resolve) {
       console.log('promise1'); //第四个打印 new Promise是一个同步的操作 相当于 let hy = new Promise 构造函数写法
       resolve();           
   }).then(function() {    //.then  异步操作 相当于hy.then hy就是你声明的一个变量 
       console.log('promise2'); //第七个打印 属于微任务 放入Event Table 微任务执行的比宏任务要快 
   });                         //要注意的是必须要等到所有微任务都执行完毕后才会执行宏任务
   console.log('script end'); //第五个打印 同步操作 

标签：异步,同步,console,log,microTask,之宏,js,任务,执行
来源： https://blog.csdn.net/weixin_58102387/article/details/122588883