面试题：JavaScript生成器的底层原理及在复杂应用场景中的优化

JavaScript生成器在引擎层面工作原理

状态机实现
- 生成器函数是一种特殊的函数，调用它并不会立即执行函数体，而是返回一个生成器对象。这个生成器对象维护着一个状态机。
- 生成器对象有一个内部状态，包括 suspended, executing, completed 等。当生成器首次创建时，状态为 suspended。
- 调用生成器对象的 next() 方法会将状态从 suspended 切换到 executing，执行生成器函数体直到遇到 yield 关键字。yield 会暂停函数执行，并返回一个包含 value 和 done 属性的对象。此时生成器状态又变为 suspended。当再次调用 next() 时，从 yield 暂停处继续执行，直到再次遇到 yield 或者函数结束，函数结束时 done 变为 true。
- 例如：

function* myGenerator() {
    yield 1;
    yield 2;
    return 3;
}
const gen = myGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: true }

内存管理
- 生成器暂停执行时，其局部变量和执行上下文会被保存。引擎会为生成器创建一个独立的执行上下文栈帧，当 yield 暂停时，这个栈帧被挂起，相关变量不会被释放，以便后续 next() 调用时恢复执行。
- 当生成器执行完成（done 为 true），其相关的执行上下文栈帧和局部变量等内存占用会被回收，除非有外部引用导致这些变量无法被垃圾回收机制回收。

在高并发且资源有限的Web应用场景下的优化策略

控制并发数量
- 分析：在资源有限的情况下，过多的并发任务可能导致内存不足和性能下降。通过控制并发任务的数量，可以确保系统资源合理分配。
- 策略：使用队列来管理待执行的任务，设置一个最大并发数。当并发任务数量达到上限时，新任务进入队列等待，当前面的任务完成后，从队列中取出新任务执行。
- 代码示例：

function asyncTask(id) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`Task ${id} completed`);
            resolve(id);
        }, 1000);
    });
}

function* taskGenerator() {
    for (let i = 1; i <= 10; i++) {
        yield asyncTask(i);
    }
}

const gen = taskGenerator();
const maxConcurrent = 3;
let runningCount = 0;
const taskQueue = [];

function processQueue() {
    while (runningCount < maxConcurrent && taskQueue.length > 0) {
        const task = taskQueue.shift();
        runningCount++;
        task.then(() => {
            runningCount--;
            processQueue();
        });
    }
}

for (let task of gen) {
    taskQueue.push(task);
}
processQueue();

优化内存使用
- 分析：生成器暂停时保存的执行上下文和变量可能占用较多内存，特别是在处理大量任务时。可以尽量减少生成器内部不必要的变量和数据存储。
- 策略：在生成器函数中，及时释放不再使用的变量，避免不必要的闭包引用。如果生成器返回的中间结果占用大量内存，可以考虑分批处理或者使用迭代器模式逐步处理，而不是一次性加载到内存中。
- 代码示例：

function* largeDataGenerator() {
    const largeArray = Array.from({ length: 1000000 }, (_, i) => i + 1);
    for (let i = 0; i < largeArray.length; i += 1000) {
        const batch = largeArray.slice(i, i + 1000);
        yield batch;
        // 释放不再使用的部分数组，虽然JavaScript引擎有垃圾回收，但这样做更明确
        largeArray.length = i;
    }
}

const dataGen = largeDataGenerator();
for (let batch of dataGen) {
    // 处理每一批数据
    console.log(`Processing batch of length ${batch.length}`);
}

错误处理优化
- 分析：在高并发异步任务中，错误处理不当可能导致应用程序不稳定。生成器在错误处理方面有独特的方式，需要合理运用。
- 策略：使用 try - catch 块包裹生成器的 next() 调用，以便捕获生成器内部异步任务抛出的错误。同时，在生成器函数内部也可以使用 try - catch 处理 yield 表达式可能抛出的错误。
- 代码示例：

function asyncErrorTask(id) {
    return new Promise((_, reject) => {
        setTimeout(() => {
            if (id === 5) {
                reject(new Error(`Task ${id} failed`));
            } else {
                console.log(`Task ${id} completed`);
                resolve(id);
            }
        }, 1000);
    });
}

function* errorTaskGenerator() {
    for (let i = 1; i <= 10; i++) {
        try {
            yield asyncErrorTask(i);
        } catch (error) {
            console.error(`Generator internal error: ${error.message}`);
        }
    }
}

const errorGen = errorTaskGenerator();
while (true) {
    const { value, done } = errorGen.next();
    if (done) break;
    value.then().catch((error) => {
        console.error(`External error handling: ${error.message}`);
    });
}

星途面试题库

面试题：JavaScript生成器的底层原理及在复杂应用场景中的优化

知识考点

面试题答案

JavaScript生成器在引擎层面工作原理

在高并发且资源有限的Web应用场景下的优化策略