← Назад к Apps

JS PERFORMANCE BENCHMARK

Интерактивный инструмент для сравнения производительности JavaScript-кода прямо в браузере. Позволяет запускать два разных варианта кода и измерять время их выполнения в одинаковых условиях.

▶ Запустить

👁 17

(function () {
  const root = container;

  function runTest(code, iterations = 100000) {
    const fn = new Function(code);

    const start = performance.now();

    for (let i = 0; i < iterations; i++) {
      fn();
    }

    const end = performance.now();

    return (end - start).toFixed(2);
  }

  root.innerHTML = `
    <div style="font-family: monospace; max-width:700px; margin:auto; color:#fff;">
      <h2>⚡ JS Benchmark Tool</h2>

      <textarea id="codeA" placeholder="Code A" style="width:100%; height:120px;"></textarea>
      <textarea id="codeB" placeholder="Code B" style="width:100%; height:120px; margin-top:10px;"></textarea>

      <input id="iter" type="number" value="100000" style="width:100%; margin-top:10px; padding:8px;" />

      <button id="run" style="width:100%; margin-top:10px; padding:10px; cursor:pointer;">
        Run Benchmark
      </button>

      <pre id="out" style="margin-top:15px; background:#111; padding:10px;"></pre>
    </div>
  `;

  const codeA = root.querySelector("#codeA");
  const codeB = root.querySelector("#codeB");
  const iter = root.querySelector("#iter");
  const out = root.querySelector("#out");
  const run = root.querySelector("#run");

  run.onclick = () => {
    try {
      const it = Number(iter.value || 100000);

      const timeA = runTest(codeA.value, it);
      const timeB = runTest(codeB.value, it);

      out.textContent =
        `Code A: ${timeA} ms\n` +
        `Code B: ${timeB} ms\n\n` +
        `Winner: ` + (timeA < timeB ? "A ⚡" : "B ⚡");

    } catch (e) {
      out.textContent = "Error: " + e.message;
    }
  };
})();