JS Worker 性能 - 解析 JSON

Question

我正在尝试使用 Workers，因为我的用户界面非常慢，因为在后台运行大量任务。

我从最简单的任务开始，例如解析 JSON。 请参阅下面的非常简单的代码来创建在 Worke 上运行的异步 function。

性能方面有很大的区别：

JSON.parse(jsonStr);

和

await parseJsonAsync(jsonStr);

JSON.parse() 需要 1 毫秒，而 parseJsonAsync 需要 102 毫秒！

所以我的问题是：运行工作线程的开销真的那么大还是我错过了什么？

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,
            });
        }
    );
}

parseJson.js

self.onmessage = ({
    data: {
        jsonStr
    }
}) => {

    let jsonObject = null;

    try {
        jsonObject = JSON.parse(jsonStr);
    } catch (ex) {

    } finally {
        self.postMessage({
            jsonObject: jsonObject
        });
    }
};

Answer 1

我在下面分享我的基准代码。 你可以自己玩。

您可以通过更改Array.from({ length: number })来调整jsonStr中的项目数。 或者您可以比较runTest(1000)与runTest()以查看等待工作人员启动与否的时间差异。

我的测试显示启动工作器大约需要 30 毫秒。 现在，如果我等待工作人员启动，然后运行测试，我得到了这些数字（以毫秒为单位）：

＃项目	主要的	工人
1,000	0.2	2.1
10,000	1.3	9.8
100,000	15.4	73.5
1,000,000	165	854
10,000,000	2633	15312

 const blobURL = URL.createObjectURL( new Blob( [ "(", function () { self.onmessage = ({ data: { jsonStr } }) => { let jsonObject = null; try { jsonObject = JSON.parse(jsonStr); } catch (ex) { } finally { self.postMessage({ jsonObject: jsonObject, }); } }; }.toString(), ")()", ], { type: "application/javascript" } ) ); const worker = new Worker(blobURL); const jsonStr = "[" + Array.from({ length: 1000 }, () => `{"foo":"bar"}`).join(",") + "]"; async function parseJsonAsync(jsonStr) { return new Promise((resolve) => { worker.onmessage = ({ data: { jsonObject } }) => { resolve(jsonObject); // tiem end here const delta = performance.now() - t0; console.log("main-worker", delta); parseJsonInMain(jsonStr); }; const t0 = performance.now(); worker.postMessage({ jsonStr: jsonStr, }); }); } const test = () => parseJsonAsync(jsonStr); function runTest(delay) { if (delay) { setTimeout(test, delay); } else { test(); } } function parseJsonInMain(jsonStr) { let obj; try { const t0 = performance.now(); obj = JSON.parse(jsonStr); const delta = performance.now() - t0; console.log("main", delta); } catch {} } runTest(1000);