MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript异步迭代的性能优化

2022-05-196.8k 阅读

JavaScript 异步迭代基础

异步迭代的概念

在 JavaScript 中，迭代（iteration）是指按顺序依次访问集合（如数组、对象等）中的元素的过程。而异步迭代则是在异步操作（如读取文件、网络请求等）的场景下进行这种依次访问元素的操作。

JavaScript 中的异步操作通常使用 Promise 来处理。传统的同步迭代，比如 for 循环，会按顺序依次执行每一次迭代，在迭代过程中如果遇到耗时操作，会阻塞后续代码的执行。而异步迭代则允许在执行异步操作时，不阻塞主线程，使得程序能够更高效地利用资源。

例如，假设我们有一个函数 fetchData，它返回一个 Promise，模拟从服务器获取数据的异步操作。如果我们想要获取多个数据，传统的同步方式会依次等待每个 fetchData 操作完成，这会浪费大量时间在等待上。而异步迭代则可以让我们在等待一个 fetchData 操作完成的同时，启动其他 fetchData 操作，提高整体效率。

异步迭代器与异步可迭代对象

在 JavaScript 中，异步迭代是通过异步迭代器（async iterators）和异步可迭代对象（async iterable objects）来实现的。

一个对象如果实现了 Symbol.asyncIterator 方法，那么它就是一个异步可迭代对象。这个方法返回一个异步迭代器。异步迭代器必须实现 next() 方法，该方法返回一个 Promise，Promise 解析后的值是一个对象，该对象包含 value 和 done 两个属性，value 是当前迭代的值，done 是一个布尔值，表示迭代是否结束。

以下是一个简单的异步可迭代对象和异步迭代器的示例：

const asyncIterable = {
    data: [1, 2, 3],
    async *[Symbol.asyncIterator]() {
        for (let value of this.data) {
            yield new Promise((resolve) => {
                setTimeout(() => {
                    resolve(value);
                }, 1000);
            });
        }
    }
};

(async () => {
    for await (let value of asyncIterable) {
        console.log(value);
    }
})();

在这个示例中，asyncIterable 是一个异步可迭代对象，它的 Symbol.asyncIterator 方法返回一个异步生成器（async generator），而异步生成器本身就是一个异步迭代器。for await...of 循环用于遍历这个异步可迭代对象，每次迭代等待 Promise 解析后输出值。

异步迭代的性能问题

串行异步迭代的性能瓶颈

在串行异步迭代中，每一次迭代都要等待前一次迭代的异步操作完成后才能开始。这种方式虽然逻辑简单，但在处理大量异步任务时，性能会成为瓶颈。

例如，假设我们有一个函数 fetchData，它返回一个 Promise，模拟从服务器获取数据的操作，并且每次操作需要 1 秒才能完成。我们想要获取 100 个数据：

const fetchData = (id) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`Data for ${id}`);
        }, 1000);
    });
};

const fetchDataSequentially = async () => {
    const results = [];
    for (let i = 0; i < 100; i++) {
        const data = await fetchData(i);
        results.push(data);
    }
    return results;
};

const start = Date.now();
fetchDataSequentially().then((results) => {
    const end = Date.now();
    console.log(`Total time: ${(end - start) / 1000} seconds`);
});

在这个示例中，每次 await fetchData(i) 都会等待前一次 fetchData 操作完成，所以获取 100 个数据总共需要 100 秒。

并行异步迭代的资源消耗

并行异步迭代是指同时启动多个异步操作，而不需要等待前一个操作完成。虽然这种方式可以大大提高整体的执行效率，但也会带来资源消耗的问题。

例如，我们可以使用 Promise.all 来实现并行异步迭代：

const fetchData = (id) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`Data for ${id}`);
        }, 1000);
    });
};

const fetchDataInParallel = async () => {
    const promises = [];
    for (let i = 0; i < 100; i++) {
        promises.push(fetchData(i));
    }
    const results = await Promise.all(promises);
    return results;
};

const start = Date.now();
fetchDataInParallel().then((results) => {
    const end = Date.now();
    console.log(`Total time: ${(end - start) / 1000} seconds`);
});

在这个示例中，Promise.all 会同时启动 100 个 fetchData 操作，理论上只需要 1 秒就能完成所有操作。然而，如果每个 fetchData 操作需要占用较多的系统资源（如网络带宽、内存等），同时启动 100 个操作可能会导致系统资源耗尽，从而引发性能问题甚至程序崩溃。

错误处理对性能的影响

在异步迭代中，错误处理也会对性能产生影响。如果在异步迭代过程中出现错误，不正确的错误处理方式可能会导致不必要的性能开销。

例如，在使用 Promise.all 进行并行异步迭代时，如果其中一个 Promise 被拒绝，Promise.all 会立即拒绝，并且不会等待其他 Promise 完成。这可能会导致部分资源浪费，因为一些已经启动的异步操作可能还在执行但不会被使用到。

const fetchData = (id) => {
    if (id === 50) {
        return Promise.reject(new Error('Error at 50'));
    }
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`Data for ${id}`);
        }, 1000);
    });
};

const fetchDataInParallel = async () => {
    const promises = [];
    for (let i = 0; i < 100; i++) {
        promises.push(fetchData(i));
    }
    try {
        const results = await Promise.all(promises);
        return results;
    } catch (error) {
        console.error('Error:', error);
    }
};

const start = Date.now();
fetchDataInParallel().then(() => {
    const end = Date.now();
    console.log(`Total time: ${(end - start) / 1000} seconds`);
});

在这个示例中，当 id === 50 时，Promise.all 会立即拒绝，但是其他 99 个 fetchData 操作可能还在执行，这就造成了资源浪费。

异步迭代的性能优化策略

限制并行度

为了避免并行异步迭代带来的资源消耗问题，可以通过限制并行度的方式来优化性能。也就是说，在同一时间只允许一定数量的异步操作并行执行。

我们可以使用队列来实现这一策略。以下是一个示例：

const fetchData = (id) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`Data for ${id}`);
        }, 1000);
    });
};

const fetchDataWithLimitedParallelism = async (limit) => {
    const queue = [];
    const results = [];
    const enqueue = (id) => {
        return new Promise((resolve) => {
            queue.push(() => fetchData(id).then((data) => {
                results.push(data);
                resolve();
            }));
            if (queue.length === 1) {
                processQueue();
            }
        });
    };
    const processQueue = async () => {
        while (queue.length > 0 && (queue.length - 1 < limit || limit === 0)) {
            const task = queue.shift();
            await task();
        }
    };
    for (let i = 0; i < 100; i++) {
        await enqueue(i);
    }
    await processQueue();
    return results;
};

const start = Date.now();
fetchDataWithLimitedParallelism(5).then((results) => {
    const end = Date.now();
    console.log(`Total time: ${(end - start) / 1000} seconds`);
});

在这个示例中，fetchDataWithLimitedParallelism 函数接受一个 limit 参数，表示最大并行度。通过队列和 processQueue 函数，我们确保在同一时间最多只有 limit 个 fetchData 操作在执行。

高效的错误处理

为了减少错误处理对性能的影响，我们需要采用更高效的错误处理方式。例如，在并行异步迭代中，可以使用 Promise.allSettled 来处理错误，这样即使某个 Promise 被拒绝，其他 Promise 也会继续执行，避免资源浪费。

const fetchData = (id) => {
    if (id === 50) {
        return Promise.reject(new Error('Error at 50'));
    }
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`Data for ${id}`);
        }, 1000);
    });
};

const fetchDataInParallelWithBetterErrorHandling = async () => {
    const promises = [];
    for (let i = 0; i < 100; i++) {
        promises.push(fetchData(i));
    }
    const results = await Promise.allSettled(promises);
    const successfulResults = [];
    results.forEach((result, index) => {
        if (result.status === 'fulfilled') {
            successfulResults.push(result.value);
        } else {
            console.error(`Error at ${index}:`, result.reason);
        }
    });
    return successfulResults;
};

const start = Date.now();
fetchDataInParallelWithBetterErrorHandling().then((results) => {
    const end = Date.now();
    console.log(`Total time: ${(end - start) / 1000} seconds`);
});

在这个示例中，Promise.allSettled 会等待所有 Promise 都完成（无论是成功还是失败），然后返回一个包含每个 Promise 结果的数组。通过遍历这个数组，我们可以分别处理成功和失败的情况，避免因一个错误而终止所有异步操作。

复用资源与缓存

在异步迭代过程中，如果某些异步操作的结果是相同或者可以复用的，可以考虑使用缓存来提高性能。

例如，假设我们有一个函数 getUserData，它从服务器获取用户数据，并且对于相同的用户 ID，数据不会改变。我们可以使用一个缓存对象来存储已经获取的数据：

const cache = {};
const getUserData = async (userId) => {
    if (cache[userId]) {
        return cache[userId];
    }
    return new Promise((resolve) => {
        setTimeout(() => {
            const data = `User data for ${userId}`;
            cache[userId] = data;
            resolve(data);
        }, 1000);
    });
};

const fetchUserDataForUsers = async (userIds) => {
    const results = [];
    for (let userId of userIds) {
        const data = await getUserData(userId);
        results.push(data);
    }
    return results;
};

const userIds = [1, 2, 1, 3];
const start = Date.now();
fetchUserDataForUsers(userIds).then((results) => {
    const end = Date.now();
    console.log(`Total time: ${(end - start) / 1000} seconds`);
});

在这个示例中，当 getUserData 被调用时，首先检查缓存中是否已经有对应 userId 的数据。如果有，则直接返回缓存中的数据，避免了重复的异步操作，从而提高了性能。

优化异步操作本身

除了在异步迭代的控制和管理上进行优化，还可以对异步操作本身进行优化。例如，优化网络请求的参数，减少不必要的数据传输；优化文件读取的方式，提高读取效率等。

假设我们有一个函数 readFile，它从文件中读取数据。如果文件较大，可以考虑分块读取，而不是一次性读取整个文件：

const fs = require('fs');
const util = require('util');

const readFileInChunks = async (fileName, chunkSize = 1024 * 1024) => {
    const fileDescriptor = await util.promisify(fs.open)(fileName, 'r');
    const stats = await util.promisify(fs.fstat)(fileDescriptor);
    const totalSize = stats.size;
    let position = 0;
    const chunks = [];
    while (position < totalSize) {
        const buffer = Buffer.alloc(Math.min(chunkSize, totalSize - position));
        const { bytesRead } = await util.promisify(fs.read)(fileDescriptor, buffer, 0, buffer.length, position);
        chunks.push(buffer.slice(0, bytesRead));
        position += bytesRead;
    }
    await util.promisify(fs.close)(fileDescriptor);
    return Buffer.concat(chunks);
};

readFileInChunks('largeFile.txt').then((data) => {
    console.log('File read successfully:', data.toString());
});

在这个示例中，readFileInChunks 函数分块读取文件，每次读取 chunkSize 大小的数据，避免了一次性读取大文件可能导致的内存问题，同时也提高了读取效率。

性能优化工具与监测

使用 console.time() 和 console.timeEnd()

在 JavaScript 中，console.time() 和 console.timeEnd() 是两个简单但有效的性能监测工具。可以使用它们来测量一段代码的执行时间。

例如，我们可以使用它们来测量一个异步迭代函数的执行时间：

const fetchData = (id) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`Data for ${id}`);
        }, 1000);
    });
};

const fetchDataSequentially = async () => {
    const results = [];
    for (let i = 0; i < 10; i++) {
        const data = await fetchData(i);
        results.push(data);
    }
    return results;
};

console.time('fetchDataSequentially');
fetchDataSequentially().then(() => {
    console.timeEnd('fetchDataSequentially');
});

在这个示例中，console.time('fetchDataSequentially') 开始计时，console.timeEnd('fetchDataSequentially') 结束计时，并输出这段代码的执行时间。

使用性能分析工具

现代浏览器和 Node.js 都提供了强大的性能分析工具。

在浏览器中，可以使用 Chrome DevTools 的 Performance 面板。打开 DevTools，切换到 Performance 面板，点击录制按钮，然后执行异步迭代相关的操作，最后停止录制。Performance 面板会展示详细的性能分析报告，包括每个函数的执行时间、CPU 使用率、内存变化等信息。

在 Node.js 中，可以使用 node --prof 命令来生成性能分析数据，然后使用 node --prof-process 工具来处理这些数据，生成更易读的报告。

例如，假设我们有一个 app.js 文件，包含异步迭代的代码：

node --prof app.js

这会在当前目录下生成一个 v8-profiler-xxx.log 文件。然后使用以下命令处理这个文件：

node --prof-process v8-profiler-xxx.log > processed.txt

processed.txt 文件中会包含详细的性能分析报告，帮助我们找到性能瓶颈。

代码复杂度分析

除了直接测量执行时间和资源使用情况，分析代码复杂度也是优化性能的重要手段。高复杂度的代码往往伴随着更高的性能开销。

可以使用工具如 escomplex 来分析 JavaScript 代码的复杂度。安装 escomplex 后，可以在命令行中运行以下命令来分析一个 JavaScript 文件的复杂度：

escomplex app.js

escomplex 会输出文件中每个函数的复杂度指标，如圈复杂度（Cyclomatic Complexity）等。通过降低复杂度，可以提高代码的性能和可维护性。

不同场景下的优化实践

网络请求场景

在网络请求场景中，异步迭代常用于处理多个请求。例如，我们需要从多个 API 端点获取数据并进行汇总。

假设我们有多个 API 端点，每个端点返回不同的数据：

const fetchData = (url) => {
    return fetch(url).then((response) => response.json());
};

const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
];

const fetchAllData = async () => {
    const promises = urls.map((url) => fetchData(url));
    const results = await Promise.all(promises);
    return results;
};

fetchAllData().then((data) => {
    console.log('All data fetched:', data);
});

在这个示例中，我们使用 Promise.all 并行发起多个网络请求。然而，如果请求数量过多，可能会导致网络拥塞。可以通过限制并行度来优化，例如：

const fetchData = (url) => {
    return fetch(url).then((response) => response.json());
};

const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
];

const fetchAllDataWithLimitedParallelism = async (limit) => {
    const queue = [];
    const results = [];
    const enqueue = (url) => {
        return new Promise((resolve) => {
            queue.push(() => fetchData(url).then((data) => {
                results.push(data);
                resolve();
            }));
            if (queue.length === 1) {
                processQueue();
            }
        });
    };
    const processQueue = async () => {
        while (queue.length > 0 && (queue.length - 1 < limit || limit === 0)) {
            const task = queue.shift();
            await task();
        }
    };
    for (let url of urls) {
        await enqueue(url);
    }
    await processQueue();
    return results;
};

fetchAllDataWithLimitedParallelism(2).then((data) => {
    console.log('All data fetched:', data);
});

在这个优化后的示例中，我们限制了同时发起的网络请求数量为 2，避免了网络拥塞，提高了整体性能。

文件操作场景

在文件操作场景中，异步迭代可用于处理多个文件的读取、写入等操作。

例如，我们需要读取多个文件的内容并进行合并：

const fs = require('fs');
const util = require('util');

const readFile = util.promisify(fs.readFile);

const fileNames = ['file1.txt', 'file2.txt', 'file3.txt'];

const readAllFiles = async () => {
    const promises = fileNames.map((fileName) => readFile(fileName, 'utf8'));
    const results = await Promise.all(promises);
    return results.join('');
};

readAllFiles().then((content) => {
    console.log('All files content:', content);
});

在这个示例中，Promise.all 并行读取多个文件。如果文件较大，可能会导致内存问题。可以通过分块读取并异步迭代的方式优化：

const fs = require('fs');
const util = require('util');

const readFileInChunks = async (fileName, chunkSize = 1024 * 1024) => {
    const fileDescriptor = await util.promisify(fs.open)(fileName, 'r');
    const stats = await util.promisify(fs.fstat)(fileDescriptor);
    const totalSize = stats.size;
    let position = 0;
    const chunks = [];
    while (position < totalSize) {
        const buffer = Buffer.alloc(Math.min(chunkSize, totalSize - position));
        const { bytesRead } = await util.promisify(fs.read)(fileDescriptor, buffer, 0, buffer.length, position);
        chunks.push(buffer.slice(0, bytesRead));
        position += bytesRead;
    }
    await util.promisify(fs.close)(fileDescriptor);
    return Buffer.concat(chunks).toString('utf8');
};

const fileNames = ['file1.txt', 'file2.txt', 'file3.txt'];

const readAllFilesInChunks = async () => {
    const results = [];
    for (let fileName of fileNames) {
        const content = await readFileInChunks(fileName);
        results.push(content);
    }
    return results.join('');
};

readAllFilesInChunks().then((content) => {
    console.log('All files content:', content);
});

在这个优化后的示例中，我们分块读取文件，减少了内存占用，同时通过异步迭代依次处理每个文件，提高了性能。

数据处理场景

在数据处理场景中，异步迭代可用于处理大量数据的计算、转换等操作。

例如，我们有一个包含大量数字的数组，需要对每个数字进行异步计算（模拟耗时操作）：

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

const asyncCalculate = (num) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num * num);
        }, 10);
    });
};

const calculateAll = async () => {
    const promises = largeArray.map((num) => asyncCalculate(num));
    const results = await Promise.all(promises);
    return results;
};

calculateAll().then((results) => {
    console.log('All calculations done:', results);
});

在这个示例中，Promise.all 并行处理数组中的每个数字。如果数组非常大，可能会导致性能问题。可以通过限制并行度来优化：

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

const asyncCalculate = (num) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num * num);
        }, 10);
    });
};

const calculateAllWithLimitedParallelism = async (limit) => {
    const queue = [];
    const results = [];
    const enqueue = (num) => {
        return new Promise((resolve) => {
            queue.push(() => asyncCalculate(num).then((result) => {
                results.push(result);
                resolve();
            }));
            if (queue.length === 1) {
                processQueue();
            }
        });
    };
    const processQueue = async () => {
        while (queue.length > 0 && (queue.length - 1 < limit || limit === 0)) {
            const task = queue.shift();
            await task();
        }
    };
    for (let num of largeArray) {
        await enqueue(num);
    }
    await processQueue();
    return results;
};

calculateAllWithLimitedParallelism(10).then((results) => {
    console.log('All calculations done:', results);
});

在这个优化后的示例中，我们限制了同时进行的计算数量为 10，避免了因一次性处理过多任务导致的性能问题。