Puppeteer调用exposeFunction传入大对象参数时执行速度极慢

page.exposeFunction 底层依赖CDP跨进程通信实现浏览器上下文到Node.js上下文的调用，所有入参都会经过结构化克隆序列化、跨进程传输、反序列化三个步骤。你场景里单次传入的Uint8Array大小为12807204=3.5MB左右，高频调用下序列化和跨进程传输的开销会被放大，这就是单次调用耗时接近1秒的核心原因——无参数调用时没有序列化传输开销，自然可以瞬时完成。

方案1：改用主动拉取模式，避免回调传参 #

不要在页面绘制完成后通过exposeFunction的回调主动推送大对象，改成Node侧主动拉取数据。Puppeteer对page.evaluate返回的TypedArray类型做过专门的二进制传输优化，传输效率比exposeFunction入参高3~5倍。
同时可以在页面侧预分配固定内存，避免每次绘制都新建TypedArray带来额外GC开销。

代码调整示例 #

index.html修改为：

<!doctype html>
<html>
<head></head>
<body>
    <script>
        // 预分配固定大小的缓冲区，复用内存
        window._imageBuffer = new Uint8Array(1280 * 720 * 4);
        window.__draw = function () {
            // 替换为实际绘制逻辑，直接写入预分配的缓冲区即可
            window._imageBuffer.fill(Math.floor(Math.random() * 255));
        }
    </script>
</body>
</html>

pup.js修改为：

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('file:///path/to/index.html');
    for (let i = 0; i < 600; i++) {
        console.log(i);
        // 触发页面绘制
        await page.evaluate(() => window.__draw());
        // 主动拉取缓冲区数据，传输效率远高于exposeFunction回调传参
        const imageData = await page.evaluate(() => window._imageBuffer);
        // 这里编写imageData的处理逻辑
    }
    await browser.close();
})();

方案2：共享内存传输（性能最优） #

如果对传输延迟要求极高，可以启用SharedArrayBuffer实现零拷贝传输，完全跳过序列化、跨进程拷贝步骤，传输耗时可以降到微秒级：

1. 启动浏览器时开启SharedArrayBuffer相关权限：

const browser = await puppeteer.launch({
    args: [
        '--enable-features=SharedArrayBuffer',
        '--disable-web-security',
        '--allow-file-access-from-files'
    ]
});

2. 在Node侧创建指定大小的SharedArrayBuffer，通过page.evaluateHandle将缓冲区句柄注入页面上下文，后续页面侧绘制和Node侧处理直接操作同一块共享内存即可，不需要做任何数据传输。

方案3：批量传输降低调用频次 #

如果不需要逐帧实时处理数据，可以在页面侧暂存多帧绘制结果，攒够指定数量后一次性传输到Node侧，通过减少跨进程调用次数降低总开销。比如每10帧传输一次，总传输耗时可以降到原来的1/10左右。

内容的提问来源于stack exchange，提问作者dg777