JS宏任务和微任务

简介: JS宏任务和微任务



宏任务和微任务的概念

在JavaScript中,宏任务(macro task)和微任务(micro task)是用来管理异步操作的概念。

宏任务

宏任务通常包括一些异步操作,例如定时器回调、事件回调(如点击、鼠标移动等)、网络请求等。宏任务会被推到一个任务队列中,并按照先进先出的顺序执行。当主线程空闲时,会从宏任务队列中取出一个任务进行执行。

微任务

微任务则是在当前任务执行结束后立即执行的任务。常见的微任务包括Promise回调和MutationObserver回调。微任务会优先于下一个宏任务执行,即在当前宏任务执行完毕前,所有微任务都会被执行完毕。

宏任务和微任务示例

举个例子,假设有以下代码:

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

输出结果将会是:1 -> 4 -> 3 -> 2。

解释如下:

  • 首先执行同步代码,打印出1和4;
  • 然后遇到setTimeout,将其回调函数放入宏任务队列;
  • 然后遇到Promise.resolve().then(),将其回调函数放入微任务队列;
  • 当前宏任务执行完毕,检查微任务队列,发现有一个微任务,执行微任务队列中的回调函数,打印出3;
  • 所有微任务执行完毕,开始下一个宏任务,从宏任务队列中取出setTimeout的回调函数,打印出2。

需要注意的是,当一个宏任务执行过程中产生新的微任务,这些微任务会在当前宏任务执行完之后立即执行。因此,宏任务和微任务的执行顺序是交替进行的。

宏任务和微任务区别

它们之间有以下几个区别:

1.执行时机:

宏任务是在主线程空闲时执行的,而微任务是在当前任务执行结束后立即执行的。

2.执行顺序:

宏任务按照先进先出的顺序执行,而微任务则会在下一个宏任务执行前优先执行。

3.嵌套关系:

在一个宏任务中产生的新的微任务,将会在当前宏任务执行完成后立即执行。而新的宏任务则需要等待当前宏任务执行完毕后才会执行。

4.优先级:

微任务具有更高的优先级,它们会在当前宏任务执行完毕前尽早执行,以保证及时更新UI或处理其他紧急任务。这意味着在同一事件循环中,如果有微任务存在,那么它们会被连续执行,直到所有微任务都执行完毕,才会继续执行下一个宏任务。

常见的宏任务包括定时器回调、事件回调(如点击、鼠标移动等)、网络请求等。而常见的微任务包括Promise回调、MutationObserver回调等。

理解宏任务和微任务的执行顺序对于处理异步操作、避免阻塞主线程非常重要,能够帮助我们更好地编写高效的JavaScript代码。

相关文章
|
2月前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
1月前
|
JavaScript 前端开发 调度
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
42 0
|
2月前
|
前端开发 JavaScript API
JavaScript 的宏任务和微任务有什么区别
【9月更文挑战第6天】JavaScript 的宏任务和微任务有什么区别
58 4
|
3月前
|
存储 前端开发 JavaScript
JavaScript 并发任务控制
【8月更文挑战第31天】JavaScript 并发任务控制
42 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
118 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
72 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
92 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
83 3