面试题：JavaScript异步迭代性能优化之底层原理

事件循环对异步迭代性能的影响

事件循环基本原理：JavaScript 是单线程语言，事件循环负责协调任务执行。它不断检查调用栈是否为空，当调用栈为空时，从任务队列（宏任务队列和微任务队列）中取出任务放入调用栈执行。
对异步迭代的影响：异步迭代（如使用 async/await 或异步迭代器）过程中，每个异步操作（如 await 后的 Promise 决议）会让出线程，将后续任务（微任务）加入微任务队列。如果异步迭代中有大量异步操作，频繁让出线程会导致事件循环不断切换任务，增加上下文切换开销，影响性能。例如，在一个循环中进行多次网络请求的异步迭代，每次请求完成后进入微任务队列等待执行，事件循环不断在不同请求的处理逻辑间切换。

避免事件循环性能瓶颈的方法

减少微任务产生：在 async 函数内部，尽量合并操作，减少 await 的次数。例如，不要在一个循环中每个迭代都进行一次 await 操作，可以将多个相关的异步操作通过 Promise.all 合并，只在最后 await 一次 Promise.all 的结果。

// 不好的示例，每个迭代都await
async function badIteration() {
    for (let i = 0; i < 10; i++) {
        await someAsyncOperation(i);
    }
}
// 好的示例，合并异步操作
async function goodIteration() {
    const promises = [];
    for (let i = 0; i < 10; i++) {
        promises.push(someAsyncOperation(i));
    }
    await Promise.all(promises);
}

控制异步任务并发度：对于异步迭代器，如果异步操作可能很耗时且数量巨大，控制并发度可以避免过多任务同时竞争资源导致事件循环压力过大。可以使用一个队列来管理任务，同时执行的任务数量限制在一定范围内。

async function limitConcurrency(iterable, limit) {
    const tasks = [];
    const results = [];
    for (const item of iterable) {
        const task = (async () => {
            const result = await someAsyncOperation(item);
            results.push(result);
        })();
        tasks.push(task);
        if (tasks.length >= limit) {
            await Promise.race(tasks);
            tasks.splice(tasks.indexOf(await Promise.race(tasks)), 1);
        }
    }
    await Promise.all(tasks);
    return results;
}

利用宏任务和微任务特性：了解宏任务和微任务的执行顺序，在适当时候使用宏任务（如 setTimeout）延迟执行一些任务，避免微任务堆积。例如，当有一些不太紧急的异步操作，可以通过 setTimeout 放入宏任务队列，让当前微任务队列尽快清空，减少事件循环的压力。

async function delayWithMacroTask() {
    await new Promise(resolve => setTimeout(resolve, 0));
    // 后续操作
}

优化异步迭代器实现：在自定义异步迭代器时，确保迭代器内部逻辑高效，避免不必要的中间变量和复杂计算。例如，直接在迭代器的 next 方法中返回已计算好的 Promise，而不是每次都重新计算。

class CustomAsyncIterator {
    constructor(data) {
        this.data = data;
        this.index = 0;
    }
    async next() {
        if (this.index >= this.data.length) {
            return { value: undefined, done: true };
        }
        const value = await someAsyncOperation(this.data[this.index]);
        this.index++;
        return { value, done: false };
    }
}

通过以上方法，可以在复杂应用场景下有效避免事件循环带来的性能瓶颈，实现异步迭代的最优性能。

星途面试题库

面试题：JavaScript异步迭代性能优化之底层原理

知识考点

面试题答案

事件循环对异步迭代性能的影响

避免事件循环性能瓶颈的方法