宏任务和微任务，看不懂你举报我

qq_25953937

已于 2024-05-03 17:08:12 修改

阅读量322

点赞数 10

分类专栏： JavaScript 文章标签： javascript

于 2024-04-27 10:33:37 首次发布

本文链接：https://blog.csdn.net/qq_25953937/article/details/138243903

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细阐述了JavaScript中的宏任务和微任务概念，包括它们的执行顺序、特性及在实际场景中的应用，通过例子展示了宏任务如setTimeout与微任务如Promise.then的区别。

摘要由CSDN通过智能技术生成

什么是宏任务，什么是微任务?

宏任务（Macro Task）和微任务（Micro Task）是JavaScript中异步任务的两种分类，它们主要涉及到JavaScript的事件循环和任务调度机制.

宏任务

宏任务是指在当前执行栈执行完毕后立即执行的任务, 例如
setTimeout,setInterval,setImmediate(nodejs特有),I/O(文件读写操作，Node.js特有),UI渲染(浏览器特有)

微任务

微任务是指在当前执行栈执行完毕后，立即执行的任务，但⚠️微任务的优先级高于宏任务，但慢于同步任务.
Promise.then / Promise.catch / Promise.finally, process.nextTick (Node.js特有),MutationObserver(浏览器特有)

任务调度机制

JavaScript的任务调度机制总体上可以描述为以下流程：

执行全局脚本中的同步代码。
执行完同步代码后，检查微任务队列。如果队列中有微任务（例如由Promise.then()安排的任务），则执行这些微任务。
完成所有微任务后，如果有必要的话，进行渲染更新（浏览器环境中）。
开始下一个宏任务的执行（例如，setTimeout、setInterval或其他异步API调度的任务）。
重复上述步骤，循环进行。

宏任务和微任务举个🌰

自己建个index.js文件跑或者直接node index.js在终端跑

// 同步任务
console.log('首次同步任务开始');
// 异步任务（宏任务）
setTimeout(() => {
  console.log('setTimeout 1');
  new Promise((resolve) => {
    console.log('Promise1');
    resolve();
  }).then(() => {
    console.log('Promise then 1');
  });
}, 1000);
// 同步任务
console.log('首次同步任务结束');
// 异步任务
new Promise((resolve) => {
  console.log('Promise2'); //（同步任务）
  resolve();
}).then(() => { // （微任务）
  console.log('Promise then 2');
});
// '首次同步任务开始'
// '首次同步任务结束'
// 'Promise2'
// 'Promise then 2'
// 'setTimeout 1'
// 'Promise1'
// 'Promise then 1'