JS Worker性能疑问：JSON解析异步调用耗时远超同步？

我因为后台运行大型任务导致UI卡顿，想用Worker优化，先从解析JSON这种简单任务入手，写了Worker里的异步函数。性能测试发现：直接调用JSON.parse(jsonStr)只花1ms，但调用await parseJsonAsync(jsonStr)却要102ms！Worker线程的开销真这么大吗？还是我实现有问题？

相关代码如下：

主线程代码

const worker = new Worker(new URL('../workers/parseJson.js', import.meta.url));

export async function parseJsonAsync(jsonStr) {
    return new Promise(
        (resolve, reject) => {
            worker.onmessage = ({
                data: {
                    jsonObject
                }
            }) => {
                resolve(jsonObject);
            };

            worker.postMessage({
                jsonStr: jsonStr,
            });
        }
    );
}

Worker文件 parseJson.js

self.onmessage = ({
    data: {
        jsonStr
    }
}) => {
    let jsonObject = null;
    try {
        jsonObject = JSON.parse(jsonStr);
    } catch (ex) {
    } finally {
        self.postMessage({
            jsonObject: jsonObject
        });
    }
};

问题分析与优化方案 #

你的测试结果里的耗时差异，主要不是Worker本身的"开销"，而是你的实现存在几个关键问题：

1. 重复绑定onmessage导致逻辑混乱 #

每次调用parseJsonAsync时，你都给同一个Worker实例重新绑定onmessage回调。如果连续多次调用这个函数，后一次的回调会覆盖前一次的，导致前一次的Promise永远无法resolve，或者被错误的结果resolve，同时也会增加不必要的内存占用和逻辑冲突，间接拉高整体耗时。

2. 首次Worker初始化的额外开销 #

第一次创建Worker实例时，浏览器需要加载、解析、执行Worker脚本，这个过程的耗时会被算在第一次调用parseJsonAsync的时间里。不过这个开销是单次的，后续调用不会重复产生，但你的实现问题会导致其他额外耗时。

3. postMessage的结构化克隆开销 #

postMessage传递数据时，浏览器会对数据进行结构化克隆，这个过程存在开销。如果你的JSON字符串很小，结构化克隆的开销可能比JSON.parse本身还大——这也是小数据用Worker反而更慢的核心原因，Worker只适合处理大数据量的任务，此时克隆开销占比会被计算任务的耗时稀释。

优化后的实现方案 #

方案1：修复回调绑定问题，复用Worker实例

给Worker设置一次回调，用唯一标识区分不同请求，避免回调被覆盖：

主线程代码

const worker = new Worker(new URL('../workers/parseJson.js', import.meta.url));
const requestMap = new Map();
let requestId = 0;

// 只绑定一次消息监听
worker.onmessage = ({ data: { requestId, jsonObject, error } }) => {
    const { resolve, reject } = requestMap.get(requestId);
    requestMap.delete(requestId);
    error ? reject(error) : resolve(jsonObject);
};

export async function parseJsonAsync(jsonStr) {
    return new Promise((resolve, reject) => {
        const currentId = requestId++;
        requestMap.set(currentId, { resolve, reject });
        worker.postMessage({ requestId: currentId, jsonStr });
    });
}

Worker文件 parseJson.js

self.onmessage = ({ data: { requestId, jsonStr } }) => {
    try {
        const jsonObject = JSON.parse(jsonStr);
        self.postMessage({ requestId, jsonObject });
    } catch (ex) {
        self.postMessage({ requestId, error: ex.message });
    }
};

方案2：仅在大数据场景使用Worker

如果你的JSON数据很小（几KB级别），直接在主线程调用JSON.parse反而更快，因为postMessage的克隆开销超过了Worker并行计算的收益。只有当JSON数据足够大（几十MB以上），Worker的优势才会体现出来。

方案3：考虑Transferable Objects（二进制场景适用）

如果传递的是ArrayBuffer类型的数据，可以用Transferable Objects转移所有权，避免结构化克隆的开销，但JSON字符串本身无法直接转移，这个方案仅适合二进制数据处理场景。

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