JavaScript queueMicrotask与Promise.resolve().then的区别

了解 JavaScript中的queueMicrotask和Promise.resolve().then()都是用于调度微任务的API，它们都在当前脚本执行完毕后、浏览器重绘前执行。

认识 queueMicrotask是一个专门的微任务队列API，而Promise.resolve().then()则是利用Promise机制来创建微任务。

基本语法比较

queueMicrotask

queueMicrotask(() => {
  // 微任务代码
});

Promise.resolve().then()

Promise.resolve().then(() => {
  // 微任务代码
});

主要区别

1. API来源不同

注意 queueMicrotask是HTML标准中明确规定的API，属于微任务队列API。

了解 Promise.resolve().then()是Promise API的一部分，Promise是JavaScript的一个内置对象。

2. 错误处理机制

观察 queueMicrotask中的错误如果没有被捕获，会抛出到全局，可能导致应用崩溃。

queueMicrotask(() => {
  throw new Error('未捕获的错误');
});
// 这会导致全局错误

使用 Promise.resolve().then()中的错误会被Promise捕获，可以链式调用.catch()来处理。

Promise.resolve().then(() => {
  throw new Error('被Promise捕获的错误');
}).catch(err => {
  console.error('错误已捕获:', err);
});

3. 性能考虑

比较 在某些情况下，queueMicrotask可能比Promise.resolve().then()性能更好，因为它不需要创建Promise对象。

考虑 当需要调度大量微任务时，queueMicrotask的开销可能更小。

4. 浏览器兼容性

检查 queueMicrotask在现代浏览器中得到广泛支持，但在非常旧的浏览器(如IE)中不可用。

选择 如果需要支持旧浏览器，使用Promise.resolve().then()更可靠。

实际应用场景

1. 状态更新与DOM渲染

使用 这两种技术都可以用于在DOM更新后执行代码：

// 使用Promise
function updateState() {
  // 更新状态
  return Promise.resolve().then(() => {
    // 在DOM更新后执行
    console.log('DOM已更新');
  });
}

// 使用queueMicrotask
function updateStateWithQueue() {
  // 更新状态
  queueMicrotask(() => {
    // 在DOM更新后执行
    console.log('DOM已更新');
  });
}

2. 异步操作顺序控制

应用 当需要确保多个异步操作按特定顺序执行时：

// 使用Promise链
function asyncOperation1() {
  return Promise.resolve().then(() => {
    console.log('操作1完成');
  });
}

function asyncOperation2() {
  return Promise.resolve().then(() => {
    console.log('操作2完成');
  });
}

asyncOperation1().then(() => asyncOperation2());

// 使用queueMicrotask
function asyncOperation1WithQueue() {
  queueMicrotask(() => {
    console.log('操作1完成');
    queueMicrotask(() => {
      console.log('操作2完成');
    });
  });
}

代码示例对比

场景1：基本微任务调度

// queueMicrotask示例
console.log('开始');
queueMicrotask(() => {
  console.log('微任务执行 - queueMicrotask');
});
console.log('结束');

// Promise.resolve().then()示例
console.log('开始');
Promise.resolve().then(() => {
  console.log('微任务执行 - Promise');
});
console.log('结束');

两个示例的输出顺序都是：开始、结束、微任务执行。这是因为微任务会在当前脚本执行完毕后立即执行。

场景2：错误处理对比

// queueMicrotask错误处理示例
console.log('开始');
queueMicrotask(() => {
  console.log('执行中...');
  throw new Error('queueMicrotask错误');
});
console.log('结束');
// 应用会崩溃，错误未捕获

// Promise.resolve().then()错误处理示例
console.log('开始');
Promise.resolve().then(() => {
  console.log('执行中...');
  throw new Error('Promise错误');
}).catch(err => {
  console.error('错误捕获:', err.message);
});
console.log('结束');
// 应用不会崩溃，错误被捕获并处理

场景3：嵌套微任务执行顺序

// queueMicrotask嵌套示例
console.log('开始');
queueMicrotask(() => {
  console.log('外层微任务开始');
  queueMicrotask(() => {
    console.log('内层微任务');
  });
  console.log('外层微任务结束');
});
console.log('结束');

// Promise.resolve().then()嵌套示例
console.log('开始');
Promise.resolve().then(() => {
  console.log('外层微任务开始');
  Promise.resolve().then(() => {
    console.log('内层微任务');
  });
  console.log('外层微任务结束');
});
console.log('结束');

两个示例的输出顺序都是：开始、结束、外层微任务开始、外层微任务结束、内层微任务。这表明嵌套的微任务会在当前微任务完成后执行。

如何选择使用哪个API

考虑项目需求：

• 如果需要简单的微任务调度且不关心错误处理，queueMicrotask更轻量
• 如果需要错误处理或链式调用，选择Promise.resolve().then()
• 如果需要支持旧浏览器，选择Promise.resolve().then()

考虑性能因素：

• 在性能敏感的场景，特别是在大量微任务时，queueMicrotask可能更优
• 在大多数普通应用中，两者性能差异不大

高级使用技巧

1. 创建微任务辅助函数

// 统一的微任务调度函数
function scheduleMicrotask(callback) {
  // 检查queueMicrotask是否可用
  if (typeof queueMicrotask === 'function') {
    return queueMicrotask(callback);
  }
  // 回退到Promise
  return Promise.resolve().then(callback);
}

// 使用
scheduleMicrotask(() => {
  console.log('使用统一调度函数');
});

2. 微任务与宏任务的交互

// 宏任务与微任务执行顺序
console.log('1. 宏任务开始');

setTimeout(() => {
  console.log('2. 宏任务( setTimeout )');
  queueMicrotask(() => {
    console.log('3. 宏任务中的微任务');
  });
}, 0);

Promise.resolve().then(() => {
  console.log('4. 微任务( Promise )');
  setTimeout(() => {
    console.log('5. 微任务中的宏任务');
  }, 0);
});

console.log('6. 宏任务结束');

执行顺序：

1. 1. 宏任务开始
2. 6. 宏任务结束
3. 4. 微任务(Promise)
4. 3. 宏任务中的微任务
5. 2. 宏任务(setTimeout)
6. 5. 微任务中的宏任务

这展示了宏任务和微任务的执行优先级：微任务总是在当前宏任务结束后、下一宏任务开始前执行。

实际应用案例

1. 避免阻塞UI更新

// 使用微任务处理批量DOM更新
function batchUpdates(updates) {
  queueMicrotask(() => {
    updates.forEach(update => update());
  });
}

// 使用
batchUpdates([
  () => document.getElementById('el1').style.color = 'red',
  () => document.getElementById('el2').style.color = 'blue',
  () => document.getElementById('el3').style.color = 'green'
]);

2. 异步状态管理

// 使用Promise实现异步状态更新
class AsyncState {
  constructor(initialValue) {
    this._value = initialValue;
    this._pendingUpdates = [];
    this._currentPromise = Promise.resolve();
  }

  get value() {
    return this._value;
  }

  set value(newValue) {
    this._value = newValue;
    this._notify();
  }

  _notify() {
    Promise.resolve().then(() => {
      this._pendingUpdates.forEach(callback => callback(this._value));
      this._pendingUpdates = [];
    });
  }

  subscribe(callback) {
    this._pendingUpdates.push(callback);
    return () => {
      const index = this._pendingUpdates.indexOf(callback);
      if (index > -1) {
        this._pendingUpdates.splice(index, 1);
      }
    };
  }
}

总结

理解 queueMicrotask和Promise.resolve().then()都是JavaScript中用于调度微任务的API，它们在执行时机上相似，但在错误处理、API来源和性能上存在差异。

选择 根据具体需求选择合适的API，在需要错误处理或链式调用时使用Promise.resolve().then()，在需要轻量级调度且不关心错误处理时使用queueMicrotask。

注意 在编写代码时，始终考虑错误处理和浏览器兼容性，确保应用的健壮性。