Rumah  >  Artikel  >  hujung hadapan web  >  ESBench: Alat penanda aras moden

ESBench: Alat penanda aras moden

Barbara Streisand
Barbara Streisandasal
2024-09-25 06:28:06256semak imbas

penanda aras.js berakhir pada April 2024, sudah tiba masanya untuk alat generasi baharu muncul!

ESBench ialah alat penanda aras JavaScript baharu yang dikeluarkan pada tahun 2024. Ia direka bentuk untuk menyediakan sokongan penanda aras yang mudah dan berskala untuk projek JS moden.

Repositori GitHub

Masalahnya

  • Pada mulanya JavaScript dijalankan terus dari sumber, tetapi apabila aplikasi menjadi lebih kompleks, ini menjadi semakin kurang. Aplikasi moden selalunya perlu dibina, yang memerlukan alat penanda aras untuk dapat menyepadukan proses binaan, dan kesan binaan pada prestasi perlu diambil kira.

  • JavaScript tidak mempunyai "masa jalan rasmi", penyemak imbas, Node, Deno dan lebih baru, Bun, semuanya menuntut prestasi tinggi. Tetapi bagaimana dengan kod anda sendiri? Alangkah bagusnya jika ada alat yang boleh menjalankan penanda aras dalam berbilang masa jalan dan mengeksport hasilnya ke satu laporan —— itulah motivasi utama saya untuk mencipta ESBench.

  • Terdapat beberapa ciri berguna yang saya tidak nampak alat penanda aras JS boleh lakukan, seperti mengira kerumitan asimptotik, mengesahkan nilai pulangan dan memplot hasilnya ke dalam carta interaktif .

Penanda aras dengan ESBench

Untuk menyelesaikan masalah ini, saya memutuskan untuk mencipta alat baharu yang mengandungi semua ciri yang saya perlukan dan mempunyai API yang mudah.

Selepas kira-kira setahun pembangunan, ESBench dilahirkan.

Anda boleh mencuba ESBench dalam talian

Tulis Suite

ESBench memilih API pengisytiharan dan penutupan, yang merupakan cara paling popular JS ditulis.

Bandingkan Set.has dan Array.termasuk:

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

Jalankan pnpm exec esbench untuk melaksanakan suite, hasilnya:

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 |

Sedikit Lagi Ciri

Parameterisasi dan garis dasar adalah keperluan yang kerap, ESBench menyokongnya dengan pilihan mudah.

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

Laporan teks:

ESBench: A modern benchmarking tool

Cross Runtime

Kembali kepada masalah di atas, berjalan merentasi masa jalan:

// 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: {} }),
            },
        ],
    }],
});

Anda juga boleh menetapkan masa jalan sebagai garis dasar:

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

Hasilnya:

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

Lebih Banyak Kes Penggunaan

ESBench boleh melakukan lebih daripada penggunaan asas:

  • Kira kerumitan masa Big-O bagi fungsi
  • Ukur masa mampat/nyahmampat dan saiz output fungsi zlib
  • Sahkan nilai pulangan sebelum penanda aras
  • Tanda aras pada 3 imej GitHub Action

Kesimpulan

Jika anda bosan menulis penanda aras dalam JavaScript, ESBench ialah perpustakaan yang anda tunggu-tunggu.

Atas ialah kandungan terperinci ESBench: Alat penanda aras moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn