异步编程新姿势：在 JavaScript 中实现高效异步操作

异步编程是 JavaScript 的核心能力之一。从回调函数、Promise 链到 async/await，异步处理方式不断演进。然而，尽管 async/await 提升了可读性，在高频或大量异步操作场景下仍可能带来性能瓶颈。本文分享几种新型异步处理范式，在特定场景下可带来高达 80% 的性能提升。

1. async/await 的性能瓶颈

async/await 的本质是 Promise + 生成器函数 的语法糖。每个 await 会创建一个暂停点，保存执行上下文，并在异步完成后恢复执行。

// 传统 async/await 用法
async function fetchData() {
  const result = await fetch('https://api.example.com/data');
  const data = await result.json();
  return data;
}

问题：

每个 await 都有上下文切换开销。
在循环或高频调用场景下，性能消耗明显。
顺序执行异步操作，不能利用并行优势。

2. 提升性能的方法

2.1 Promise 链式优化

避免不必要的 await，使用链式调用减少上下文切换：

function fetchDataChain() {
  return fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => data);
}

高频调用场景下，这种写法比顺序 await 更高效。

2.2 并行执行 `Promise.all`

当多个异步操作 互不依赖 时，可并行执行：

async function fetchAll() {
  const [users, posts, comments] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/comments').then(r => r.json())
  ]);
  return { users, posts, comments };
}

总耗时从三次操作总和降为最长单次操作时间，性能提升约 65-70%。

2.3 批量处理异步操作

对大量异步任务，避免 for-await-of 循环，使用批处理：

async function processItemsInBatch(items, batchSize = 5) {
  for (let i = 0; i < items.length; i += batchSize) {
    const batch = items.slice(i, i + batchSize);
    await Promise.all(batch.map(item => processItem(item)));
  }
}

批处理可显著减少顺序等待时间，性能提升可达 75-80%。

2.4 Promise 池化控制并发

当需要限制同时进行的异步数量时，使用 Promise 池化：

function promisePool(items, concurrency, iteratorFn) {
  let i = 0;
  const results = [];
  const executing = new Set();

  function enqueue() {
    if (i === items.length) return Promise.resolve();

    const item = items[i++];
    const promise = Promise.resolve(iteratorFn(item, i - 1));
    results.push(promise);
    executing.add(promise);

    return promise.finally(() => {
      executing.delete(promise);
      return enqueue();
    });
  }

  return Promise.all(
    Array(Math.min(concurrency, items.length))
      .fill()
      .map(() => enqueue())
  ).then(() => Promise.all(results));
}

// 使用示例
function processItemsPooled(items) {
  return promisePool(items, 5, processItem);
}

控制并发数量可以避免资源耗尽，同时提升整体性能约 60-70%。

3. 实际应用场景

场景	推荐方式
搜索输入框请求	防抖 + `Promise.all`
大量 API 数据抓取	批处理或池化
多个独立异步操作	`Promise.all` 并行执行
控制并发请求数量	Promise 池化
高频计算或事件驱动操作	链式 Promise，减少 await

4. 总结

async/await 提升代码可读性，但非性能最佳方案。
高频或大量异步操作场景，应使用：
- Promise 链减少上下文切换。
- Promise.all并行执行。
- 批处理优化循环。
- 池化控制并发。
根据场景选择最合适策略，可带来 25%-80% 性能提升。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>异步性能对比 Demo</title>
<style>
  body { font-family: sans-serif; padding: 20px; }
  button { margin: 5px; padding: 8px 12px; }
  pre { background: #f5f5f5; padding: 10px; }
</style>
</head>
<body>

<h2>异步性能对比 Demo</h2>
<button id="seq">顺序 await</button>
<button id="parallel">Promise.all 并行</button>
<button id="batch">批处理</button>
<button id="pool">Promise 池化</button>

<pre id="output"></pre>

<script>
const output = document.getElementById('output');

// 模拟异步操作：每个请求耗时 500ms
function asyncTask(i) {
  return new Promise(resolve => {
    setTimeout(() => resolve(`任务 ${i} 完成`), 500);
  });
}

const tasks = Array.from({ length: 10 }, (_, i) => i + 1);

// 1. 顺序 await
async function runSequential() {
  const start = performance.now();
  const results = [];
  for (const task of tasks) {
    const res = await asyncTask(task);
    results.push(res);
  }
  const end = performance.now();
  output.textContent = `顺序 await 完成，耗时: ${(end-start).toFixed(2)}ms\n` + results.join('\n');
}

// 2. Promise.all 并行
async function runParallel() {
  const start = performance.now();
  const results = await Promise.all(tasks.map(asyncTask));
  const end = performance.now();
  output.textContent = `Promise.all 并行完成，耗时: ${(end-start).toFixed(2)}ms\n` + results.join('\n');
}

// 3. 批处理（每批 3 个）
async function runBatch(batchSize = 3) {
  const start = performance.now();
  const results = [];
  for (let i = 0; i < tasks.length; i += batchSize) {
    const batch = tasks.slice(i, i + batchSize);
    const res = await Promise.all(batch.map(asyncTask));
    results.push(...res);
  }
  const end = performance.now();
  output.textContent = `批处理完成，耗时: ${(end-start).toFixed(2)}ms\n` + results.join('\n');
}

// 4. Promise 池化
function promisePool(items, concurrency, iteratorFn) {
  let i = 0;
  const results = [];
  const executing = new Set();

  function enqueue() {
    if (i === items.length) return Promise.resolve();

    const item = items[i++];
    const promise = Promise.resolve(iteratorFn(item));
    results.push(promise);
    executing.add(promise);

    return promise.finally(() => {
      executing.delete(promise);
      return enqueue();
    });
  }

  return Promise.all(
    Array(Math.min(concurrency, items.length))
      .fill()
      .map(() => enqueue())
  ).then(() => Promise.all(results));
}

async function runPool() {
  const start = performance.now();
  const results = await promisePool(tasks, 3, asyncTask);
  const end = performance.now();
  output.textContent = `Promise 池化完成，耗时: ${(end-start).toFixed(2)}ms\n` + results.join('\n');
}

// 绑定按钮事件
document.getElementById('seq').addEventListener('click', runSequential);
document.getElementById('parallel').addEventListener('click', runParallel);
document.getElementById('batch').addEventListener('click', runBatch);
document.getElementById('pool').addEventListener('click', runPool);

</script>
</body>
</html>

复制全文生成海报编程 JavaScript 性能优化异步编程开发技巧

编程 异步编程新姿势：在 JavaScript 中实现高效异步操作