ESBench：現代基準測試工具

benchmark.js 將於 2024 年 4 月結束，是時候新一代工具出現了！

ESBench 是 2024 年發布的全新 JavaScript 基準測試工具。它旨在為現代 JS 專案提供簡單、可擴展的基準測試支援。

GitHub 儲存庫

問題

• 一開始，JavaScript 是直接從原始碼運行的，但隨著應用程式變得越來越複雜，這種情況變得越來越少。現代應用程式經常需要構建，這需要基準測試工具能夠整合構建過程，並且需要考慮構建對性能的影響。

• JavaScript 沒有“官方運行時”，瀏覽器、Node、Deno 以及最近的 Bun 都聲稱具有高效能。但是在你自己的程式碼中呢？ 如果有一個工具可以在多個運行時運行基準測試並將結果匯出到一份報告中，那就太酷了——這就是我創建 ESBench 的主要動機。

• 有一些有用的功能我認為JS 基準測試工具無法做到，例如計算漸近複雜度、驗證返回值以及將結果繪製到交互式圖表中.

使用 ESBench 進行基準測試

為了解決這些問題，我決定建立一個新工具，它包含我需要的所有功能並具有簡單的 API。

經過大約一年的開發，ESBench 誕生了。

您可以在線嘗試ESBench

寫作套件

ESBench 選擇聲明式 API 和閉包，這是最受歡迎的 JS 編寫方式。

比較 Set.has 和 Array.includes：

// benchmark/array-vs-set.js
export default scene => {
    const length = 1000;
    const array = Array.from({ length }, (_, i) => i);

    const set = new Set(array);
    const value = array[Math.floor(array.length / 2)];

    scene.bench("Set", () => set.has(value));
    scene.bench("Array", () => array.includes(value));
};

執行 pnpm exec esbench 執行套件，結果：

Suite: benchmark/array-vs-set.js
| No. |  Name |      time | time.SD |
| --: | ----: | --------: | ------: |
|   0 |   Set |   3.64 ns | 0.00 ns |
|   1 | Array | 326.36 ns | 0.17 ns |

更多功能

參數化和基線是常見的要求，ESBench 透過簡單的選項來支援它們。

export default {
    baseline: { type: "type", value: Set },
    params: {
        length: [10, 10_000],
        type: [Set, Array],
    },
    setup(scene) {
        const { length, type } = scene.params;

        // Prepare
        const array = Array.from({ length }, (_, i) => i);
        const set = new Set(array);
        const value = array[Math.floor(array.length / 2)];

        // Support conditions
        if (type === Set) {
            // Define benchmark cases
            scene.bench("create", () => new Set(array));
            scene.bench("has", () => set.has(value));
        } else {
            scene.bench("create", () => [...array]);
            scene.bench("has", () => array.includes(value));
        }
    },
};

文字報導：

跨運行時

回到上面的問題，跨運行時運行：

// esbench.config.js
import { defineConfig, ProcessExecutor, ViteBuilder, WebRemoteExecutor } from "esbench/host";

export default defineConfig({
    toolchains: [{
        // Build your benchmark code with Vite, require vite installed.
        builders: [new ViteBuilder()],
        executors: [
            // Run suite on Node.
            new ProcessExecutor("node"),

            // Run suite on Bun.
            new ProcessExecutor("bun"),

            // Open the default browser to run benchmark,
            // in my computer it's Firefox.
            {
                name: "Firefox",
                use: new WebRemoteExecutor({ open: {} }),
            },
        ],
    }],
});

您也可以設定運行時間作為基準：

import { defineSuite } from "esbench";

export default defineSuite({
    baseline: { type: "Executor", value: "node" },
    setup(scene) {
        const length = 1000;
        const array = Array.from({ length }, (_, i) => i);

        const set = new Set(array);
        const value = array[Math.floor(array.length / 2)];

        scene.bench("Set", () => set.has(value));
        scene.bench("Array", () => array.includes(value));
    },
});

結果：

| No. |  Name | Executor |      time | time.SD | time.ratio |
| --: | ----: | -------: | --------: | ------: | ---------: |
|   0 |   Set |     node |   3.69 ns | 0.03 ns |   baseline |
|   1 |   Set |      bun |   0.00 ns | 0.00 ns |   -100.00% |
|   2 |   Set |  Firefox |   0.00 ns | 0.00 ns |   -100.00% |
|     |       |          |           |         |            |
|   3 | Array |     node | 325.02 ns | 1.00 ns |   baseline |
|   4 | Array |      bun | 324.87 ns | 0.08 ns |     -0.04% |
|   5 | Array |  Firefox | 516.70 ns | 0.75 ns |    +58.98% |
Warnings:
[No.1] Set: The function duration is indistinguishable from the empty function duration.
[No.2] Set: The function duration is indistinguishable from the empty function duration.

更多使用案例

ESBench 的功能遠不止基本用法：

• 計算函數的 Big-O 時間複雜度
• 測量 zlib 函數的壓縮/解壓縮時間和輸出大小
• 在基準測試之前驗證回傳值
• GitHub Action 的 3 張圖片的基準

結論

如果您厭倦了用 JavaScript 編寫基準測試，ESBench 就是您一直在等待的函式庫。

以上是ESBench：現代基準測試工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！