ESBench: 최신 벤치마킹 도구-JS 튜토리얼-php.cn

ESBench: 최신 벤치마킹 도구

Barbara Streisand

풀어 주다： 2024-09-25 06:28:06

원래의

249명이 탐색했습니다.

benchmark.js가 2024년 4월에 종료됩니다. 이제 새로운 세대의 도구가 등장할 때입니다!

ESBench는 2024년에 출시된 새로운 JavaScript 벤치마킹 도구입니다. 최신 JS 프로젝트에 간단하고 확장 가능한 벤치마킹 지원을 제공하도록 설계되었습니다.

GitHub 저장소

문제

처음에는 JavaScript가 소스에서 직접 실행되었지만 애플리케이션이 더욱 복잡해짐에 따라 이러한 경우는 점점 줄어들었습니다. 최신 애플리케이션을 구축해야 하는 경우가 많습니다. 빌드 프로세스를 통합하려면 벤치마킹 도구가 필요하며 빌드가 성능에 미치는 영향을 고려해야 합니다.
JavaScript에는 "공식 런타임"이 없으며 브라우저, Node, Deno 및 최근에는 Bun이 모두 고성능을 주장합니다. 하지만 자신의 코드에서는 어떻습니까? 여러 런타임에서 벤치마크를 실행하고 결과를 하나의 보고서로 내보낼 수 있는 도구가 있다면 정말 좋을 것 같습니다 —— 이것이 ESBench를 만들게 된 주된 동기였습니다.
JS 벤치마크 도구에서는 수행할 수 없는 몇 가지 유용한 기능이 있습니다(예: 점근적 복잡성 계산, 반환 값 검증, 결과를 대화형 차트에 표시) .

ESBench를 사용한 벤치마크

이러한 문제를 해결하기 위해 필요한 모든 기능을 포함하고 간단한 API를 갖춘 새로운 도구를 만들기로 결정했습니다.

약 1년의 개발 끝에 ESBench가 탄생했습니다.

ESBench를 온라인으로 사용해 볼 수 있습니다

스위트 쓰기

ESBench는 JS 작성 방식 중 가장 널리 사용되는 선언적 API 및 클로저를 선택합니다.

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: A modern benchmarking tool

크로스 런타임

위의 문제로 돌아가서 런타임 전반에 걸쳐 실행합니다.

// 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.

로그인 후 복사