JavaScript 宏任务与微任务详解 | 极客日志

JavaScript大前端

JavaScript 宏任务与微任务详解

本文详解 JavaScript 单线程模型下的事件循环机制。内容涵盖同步任务、异步任务的分类，重点区分宏任务（如 setTimeout）与微任务（如 Promise.then）的执行顺序。通过代码示例展示了定时器延迟、Promise 链式调用及 DOM 渲染对任务队列的影响，并提供了优化长耗时计算避免阻塞主线程的实用方案。

清酒独酌发布于 2026/3/280 浏览

JavaScript 宏任务与微任务详解

1. 前言

在 JavaScript 中，任务可以分为同步任务、异步任务，而异步任务又进一步细分为宏任务和微任务。

同步任务：指那些在主线程上排队执行的任务，只有前一个任务执行完毕后，才能开始执行下一个任务。
异步任务：异步任务不会进入主线程，而是进入'任务队列'中等待执行。

JavaScript 语言本身是单线程，这意味着在任何时刻，JavaScript 引擎中只有一条主线程来处理所有的任务。

2. 同步任务

同步任务只有前一个任务执行完毕后，才能开始执行下一个任务，特点是按照顺序执行，会阻塞后续代码的执行。

console.log(1);
console.log(2);

3. 异步任务

异步任务是只有当主线程上的同步任务全部执行完毕后，才会从任务队列中取出异步任务进入主线程执行。

console.log(1); // 同步任务
setTimeout(() => console.log(3), 0); // 异步任务，等待同步任务执行完毕之后，才会执行
console.log(2); // 同步任务

宏任务

宏任务是由宿主环境发起的异步任务，通常包含较长的等待时间或需要等待 I/O 操作完成。

常见的宏任务：setTimeout / setInterval、ajax 请求、dom 事件。

微任务

微任务通常用于处理 Promise 或其他需要尽快执行的操作。

常见的微任务：Promise.then、async / await。

setTimeout(() => console.log('定时器 - 宏任务'), 0);
Promise.resolve().then(value => {
  console.log();
});
.();

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

// 即使设置了非常小的延时，浏览器也可能不会立即执行定时器回调函数，而是等待至少 4 毫秒后才执行
setTimeout(() => console.log('定时器'), 0);

console.log(new Date().getTime() / 1000);
setTimeout(() => {
  console.log('定时器：' + new Date().getTime() / 1000);
}, 200);
console.log('同步任务');
for (let i = 0; i < 20000; i++) {
  console.log('');
}

// 4. 定时器，放入宏任务队列
setTimeout(() => console.log('定时器'));
new Promise(resolve => {
  // 1. 这里是 promise 的构造函数，它是同步代码
  console.log('promise');
  resolve();
}).then(() => {
  // 3. 这里的代码会放到微任务队列
  console.log('then');
});
// 2. 同步代码
console.log('hello');
// 由于任务执行顺序是：同步任务 > 微任务 > 宏任务，所以上面代码的输出顺序为
// promise
// hello
// then
// 定时器

setTimeout(() => {
  // 1. 同步代码
  console.log('定时器');
  // 因为它是在定时器内部，所以它在宏任务执行之后才会放入任务队列，才会执行
  new Promise(resolve => {
    // 2. 同步代码
    console.log('timeout promise');
    resolve();
  }).then(() => {
    // 3. 微任务
    console.log('timeout then');
  });
  // 4. 宏任务
  setTimeout(() => console.log('定时器内部的定时器'));
});
new Promise(resolve => {
  console.log('promise');
  resolve();
}).then(() => {
  console.log('then');
});
console.log('hello');
// 其实很简单，在上一段代码的结果上，继续按照任务执行优先顺序执行
// promise
// hello
// then
// 定时器
// timeout promise
// timeout then
// 定时器内部的定时器

<head>
  <script src="./utils.js"></script>
</head>
<body>
  <h1>JavaScript 的宏任务和微任务</h1>
</body>

for (let index = 0; index < 5000000; index++) {
  document.write(' ');
}

<body>
  <h1>JavaScript 的宏任务和微任务</h1>
  <script src="./utils.js"></script>
</body>

let i = 0;
setTimeout(() => {
  // 宏任务
  console.log(++i);
}, 1000);
setTimeout(() => {
  // 宏任务
  console.log(++i);
}, 1000);

<head>
  <style>
    .container {
      width: 200px;
      border-radius: 3px;
      border: 1px solid #ccc;
    }
    #progress {
      width: 0%;
      color: #fff;
      text-align: center;
      background-color: #376de1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="progress">0</div>
  </div>
</body>

function handle() {
  let i = 0;
  (function run() {
    if (++i <= 100) {
      progress.innerHTML = i;
      progress.style.width = i + '%';
      setTimeout(run, 50);
    }
  })();
}
handle();

let count = 0;
let num = 987654321;
function task() {
  for (let i = 0; i < num; i++) {
    count += num--;
  }
  console.log(count);
}
task(); // 同步任务
console.log('hello'); // 同步任务，需要等待 task() 执行完后才能执行

let count = 0;
let num = 10000000;
function task() {
  // 首次调用先累加一次
  for (let i = 0; i <= num; i++) {
    if (num <= 0) break;
    count += num--;
  }
  if (num > 0) {
    // 后续累加，放入宏任务执行
    setTimeout(task);
  } else {
    console.log(count);
  }
}
task();
console.log('hello');

let count = 0;
let num = 987654321;
// 由于 promise 里面的代码是同步执行的，在里面直接写循环还是会卡住，所以可以写个定时器
function task() {
  return new Promise(resolve => {
    let count = 0;
    setTimeout(() => {
      for (let i = 0; i < num; i++) {
        count += num--;
      }
      resolve(count);
    });
  });
}
async function getSum(num) {
  let res = await task(num);
  console.log(res);
}
getSum(num);
console.log('hello');

let num = 987654321;
async function getSum(num) {
  let res = await Promise.resolve().then(_ => {
    let count = 0;
    for (let i = 0; i < num; i++) {
      count += num--;
    }
    return count;
  });
}
getSum(num);
console.log('hello');