JS宏任务和微任务

吴顺鹏
219 阅读8分钟

JS宏任务和微任务

1.什么是微任务和宏任务

首先，我们要先了解下 Js 。js 是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。

2.JS为什么要区分微任务和宏任务

  1. js是单线程的，但是分同步异步
  2. 微任务和宏任务皆为异步任务，它们都属于一个队列
  3. 宏任务一般是：script、setTimeout、setInterval、postMessage、MessageChannel、setImmediate(Node.js 环境)
  4. 微任务：Promise.then、Object.observe、MutationObserver、process.nextTick(Node.js 环境)
  5. 先执行同步再执行异步，异步遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务

3.微任务和宏任务有哪些

（1）宏任务一般是：
  1. script、
  2. setTimeout、
  3. setInterval、
  4. postMessage、
  5. MessageChannel、
  6. setImmediate(Node.js 环境)、
  7. Ajax、
  8. DOM事件
（2）微任务：
  1. Promise.then
  2. Object.observe
  3. MutationObserver
  4. process.nextTick(Node.js 环境)
  5. async/await。

4.微任务和宏任务是怎么执行的？

执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

这里容易产生一个错误的认识：就是微任务先于宏任务执行。实际上是先执行同步任务然后在执行异步任务，异步任务是分宏任务和微任务两种的。

==同步->异步->微任务->（dom渲染）->宏任务==

5.Event Loop和DOM渲染

每次Call Stack清空（即每次轮训结束），即同步任务执行完 都是DOM重新渲染的机会，DOM结构如有改变则重新渲染 然后再去出发下一次Event Loop

- 宏任务：DOM渲染后触发，是由浏览器规定的，如setTimeout
- 微任务：DOM渲染前触发，是ES6语法规定的，如Promise

6.事件循环

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 WEB Worker 也有一个独立的 Event Loop。

7.任务队列

根据规范，事件循环是通过任务队列的机制来进行协调的。一个 Event Loop 中，可以有一个或者多个任务队列(task queue)，一个任务队列便是一系列有序任务(task)的集合；每个任务都有一个任务源(task source)，源自同一个任务源的 task 必须放到同一个任务队列，从不同源来的则被添加到不同队列。setTimeout/Promise 等api便是任务源，而进入任务队列的是他们指定的具体执行任务。

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

  • 在此次 tick 中选择最先进入队列的任务(oldest task)，如果有则执行(一次)
  • 检查是否存在 Microtasks，如果存在则不停地执行，直至清空 Microtasks Queue
  • 更新 render
  • 主线程重复执行上述步骤

在上述tick的基础上需要了解几点：

js分为同步任务和异步任务

同步任务都在主线程上执行，形成一个执行栈

主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。

一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。 image

8.运行机制

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

  • 执行一个宏任务（栈中没有就从事件队列中获取）
  • 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
  • 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
  • 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
  • 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取） image

上案例

eg1：

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

分析：

  1. 遇到setTimout，异步宏任务，放入宏任务队列中
  2. 遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2
  3. Promise.then，异步微任务，将其放入微任务队列中
  4. 遇到同步任务console.log(5);输出5；主线程中同步任务执行完
  5. 从微任务队列中取出任务到主线程中，输出3、 4，微任务队列为空
  6. 从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空

eg2：

setTimeout(()=>{
    new Promise(resolve =>{
        resolve();
    }).then(()=>{
        console.log('test');
    });
    console.log(4);
});
new Promise(resolve => {
    resolve();
    console.log(1)
}).then( () => {
    console.log(3);
    Promise.resolve().then(() => {
        console.log('before timeout');
    }).then(() => {
        Promise.resolve().then(() => {
          console.log('also before timeout')
        })
    })
})
console.log(2);
//1，2，3，before timeout，also before timeout，4，test;

分析：

  1. 遇到setTimeout，异步宏任务，将() => {console.log(4)}放入宏任务队列中；
  2. 遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出1；
  3. 而Promise.then，异步微任务，将其放入微任务队列中
  4. 遇到同步任务console.log(2)，输出2；主线程中同步任务执行完
  5. 从微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中；
  6. 从微任务队列中取出任务a到主线程中，输出 before timeout；
  7. 从微任务队列中取出任务b到主线程中，任务b又注册了一个微任务c，放入微任务队列中；
  8. 从微任务队列中取出任务c到主线程中，输出 also before timeout；微任务队列为空
  9. 从宏任务队列中取出任务到主线程，此任务中注册了一个微任务d，将其放入微任务队列中，接下来遇到输出4，宏任务队列为空
  10. 从微任务队列中取出任务d到主线程 ，输出test，微任务队列为空

eg3

console.log(1)
setTimeout(function() {
    console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
    resolve(4)
})
p.then(data => {
    console.log(data)
})
console.log(3)
//1，3，4，2

分析

  1. 遇到同步任务console.log(1);输出1；
  2. 遇到setTimeout 异步宏任务，放入宏任务队列中；
  3. 遇到 Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，但由于new Promise没有输出事件，所以接着执行遇到.then；
  4. 执行.then，异步微任务,被分发到微任务Event Queue中；
  5. 遇到同步任务console.log(3);输出3；
  6. 主线程中同步任务执行完，从微任务队列中取出任务到主线程中，p.then 输出4,微任务执行完毕，任务队列为空；
  7. 开始执行宏任务setTimeout 输出2,宏任务队列为空；

eg4

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

分析

  1. 遇到同步任务console.log(1);输出1；
  2. 遇到setTimeout 异步宏任务，放入宏任务队列中；
  3. 遇到 Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出5，所以接着执行遇到.then；
  4. 执行.then，异步微任务,被分发到微任务Event Queue中；
  5. 遇到setTimeout，异步宏任务;放入宏任务队列中；
  6. 遇到同步任务console.log(10);输出10,主线程中同步任务全部执行完;
  7. 从微任务队列中取出任务到主线程中，输出6；
  8. 在从宏任务队列中取出任务到主线程中，执行第一个setTimeout，输出2，3，4（在宏任务中执行同步,同步，异步微任务）;
  9. 在执行第二个setTimeout，输出7，8，9（和8同理）；

eg5

new Promise((resolve, reject) => {
    resolve(1)
    new Promise((resolve, reject) => {
        resolve(2)
    }).then(data => {
        console.log(data)
    })
}).then(data => {
    console.log(data)
})
console.log(3)
//3，2，1

分析

  1. 遇到Promise,new Promise在实例化的过程中所执行的代码都是同步进行的,但由于new Promise没有输出事件，所以接着往下执行遇到new Promise没有输出事件再接着往下执行遇到.then,异步微任务,被分发到微任务Event Queue中，再接着 .then 放入微任务
  2. 遇到同步任务console.log(3) 输出3，主线程中同步任务执行完；
  3. 从微任务队列中取出任务到主线程中，输出2，1，微任务执行完毕，任务队列为空。

小结

微任务和宏任务的执行顺序是先执行同步任务，先执行同步后异步，异步分为宏任务和微任务两种，异步遇到微任务先执行微任务，执行完后如果没有微任务，就执行下一个宏任务。

avatar
文章
阅读
粉丝