面试题：JavaScript闭包在异步操作中的性能瓶颈及优化

可能出现的性能瓶颈

内存泄漏：闭包会使外部变量无法被垃圾回收机制回收，如果闭包持续存在且引用大量数据，会导致内存泄漏。例如：

function outer() {
    const largeData = new Array(1000000).fill(1);
    return function inner() {
        console.log(largeData.length);
    };
}
const innerFunc = outer();
// 这里即使outer函数执行完毕，largeData也无法被回收，因为innerFunc闭包引用了它

回调地狱：在异步任务中，若不恰当使用Promise链或async/await，会出现回调地狱，代码可读性和维护性变差，也影响性能调试。例如：

function asyncTask1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Task 1 completed');
        }, 1000);
    });
}
function asyncTask2(result1) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(result1 + ' and Task 2 completed');
        }, 1000);
    });
}
function asyncTask3(result2) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(result2 + ' and Task 3 completed');
        }, 1000);
    });
}
asyncTask1()
   .then(result1 => asyncTask2(result1))
   .then(result2 => asyncTask3(result2))
   .then(finalResult => console.log(finalResult));
// 多层嵌套的Promise链，代码复杂，不利于维护

大量微任务堆积：Promise使用微任务队列，当有大量异步任务快速生成Promise时，微任务队列可能会堆积，导致主线程长时间被占用，影响页面渲染等其他任务。例如：

function createPromises() {
    for (let i = 0; i < 10000; i++) {
        Promise.resolve().then(() => {
            // 这里执行一些简单计算或操作
            console.log('Microtask', i);
        });
    }
}
createPromises();
// 大量微任务堆积，可能阻塞主线程

优化策略

避免不必要的闭包：只在真正需要访问外部变量时使用闭包，且确保闭包执行完毕后不再引用外部变量。例如：

function outer() {
    const largeData = new Array(1000000).fill(1);
    const result = largeData.reduce((acc, val) => acc + val, 0);
    // 计算完结果后不再需要largeData，释放内存
    return function inner() {
        console.log(result);
    };
}
const innerFunc = outer();

合理使用async/await：使用async/await使异步代码看起来更像同步代码，提高可读性，同时避免回调地狱。例如：

async function executeTasks() {
    const result1 = await asyncTask1();
    const result2 = await asyncTask2(result1);
    const finalResult = await asyncTask3(result2);
    console.log(finalResult);
}
executeTasks();
// 代码更简洁清晰

控制微任务执行频率：可以使用setTimeout将部分任务放入宏任务队列，避免微任务堆积。例如：

function createPromises() {
    const batchSize = 100;
    for (let i = 0; i < 10000; i += batchSize) {
        setTimeout(() => {
            for (let j = i; j < i + batchSize; j++) {
                Promise.resolve().then(() => {
                    console.log('Microtask', j);
                });
            }
        }, 0);
    }
}
createPromises();
// 分批执行微任务，减少对主线程的阻塞

星途面试题库

面试题：JavaScript闭包在异步操作中的性能瓶颈及优化

知识考点

面试题答案

可能出现的性能瓶颈

优化策略