Port benchmark from upstream (#3)

7rulnik · Feb 13, 2021 · d650556 · d650556
1 parent a14498c
commit d650556
Show file tree

Hide file tree

Showing 15 changed files with 764 additions and 0 deletions.
diff --git a/bench-js/.gitignore b/bench-js/.gitignore
@@ -0,0 +1 @@
+*.csv
diff --git a/bench-js/README.md b/bench-js/README.md
@@ -0,0 +1,20 @@
+# Benchmarking
+
+This directory contains helpers for benchmarking the `mozilla/source-map`
+library.
+
+Ensure that you have built the library, as these benchmarks rely on
+`dist/source-map.js`. See the main README.md for detais on building.
+
+Run a local webserver from the root of the repository:
+
+```
+$ cd source-map/
+$ python2 -m SimpleHTTPServer # or `python3 -m http.server`
+```
+
+Open
+[http://localhost:8000/bench-js/bench.html](http://localhost:8000/bench-js/bench.html)
+in your browser.
+
+Open `bench.html` in a browser and click on the appropriate button.
diff --git a/bench-js/angular-min-source-map.js b/bench-js/angular-min-source-map.js
diff --git a/bench-js/bench-dom-bindings.js b/bench-js/bench-dom-bindings.js
@@ -0,0 +1,126 @@
+function bindRange(labelId, updater) {
+  const label = document.getElementById(labelId);
+  const input = label.querySelector("input");
+
+  input.addEventListener("input", e => {
+    e.preventDefault();
+    updater(input.value);
+  });
+
+  updater(input.value);
+}
+
+bindRange("warm-up-iters", input => {
+  const value = parseInt(input, 10);
+  WARM_UP_ITERATIONS = value;
+});
+
+bindRange("bench-iters", input => {
+  const value = parseInt(input, 10);
+  BENCH_ITERATIONS = value;
+});
+
+const whichMap = document.getElementById("input-map");
+const multiplyBy = document.getElementById("multiply-size-by");
+
+var testSourceMap = SCALA_JS_RUNTIME_SOURCE_MAP;
+
+const updateTestSourceMap = () => {
+  const origMap = window[whichMap.value];
+  testSourceMap = JSON.parse(JSON.stringify(origMap));
+
+  const factor = parseInt(multiplyBy.value, 10);
+  if (factor === 1) {
+    return;
+  }
+
+  const mappings = new Array(factor);
+  mappings.fill(origMap.mappings);
+  testSourceMap.mappings = mappings.join(";");
+
+  for (let i = 0; i < factor; i++) {
+    testSourceMap.sources.splice(testSourceMap.sources.length, 0, ...origMap.sources);
+    testSourceMap.names.splice(testSourceMap.names.length, 0, ...origMap.names);
+  }
+};
+updateTestSourceMap();
+
+whichMap.addEventListener("input", e => {
+  e.preventDefault();
+  updateTestSourceMap();
+});
+
+multiplyBy.addEventListener("input", e => {
+  e.preventDefault();
+  updateTestSourceMap();
+});
+
+var implAndBrowser = "<unknown>";
+
+const implAndBrowserInput = document.getElementById("impl-and-browser");
+const updateImplAndBrowser = () => {
+  implAndBrowser = implAndBrowserInput.value;
+};
+implAndBrowserInput.addEventListener("input", updateImplAndBrowser);
+updateImplAndBrowser();
+
+// Run a benchmark when the given button is clicked and display results in the
+// given element.
+function benchOnClick(button, results, benchName, bencher) {
+  button.addEventListener(
+    "click",
+    async function(e) {
+      e.preventDefault();
+
+      const buttons = [...document.querySelectorAll("button")];
+      buttons.forEach(b => b.setAttribute("disabled", true));
+      results.innerHTML = "";
+      await new Promise(r => requestAnimationFrame(r));
+
+      var stats = await bencher();
+
+      buttons.forEach(b => b.removeAttribute("disabled"));
+
+      const csv = stats.xs
+        .map(x => `"${implAndBrowser}",${testSourceMap.mappings.length},"${benchName}",${x}`)
+        .join("\n");
+
+      results.innerHTML = `
+      <table>
+        <thead>
+          <tr>
+            <td>Samples</td>
+            <td>Total (${stats.unit})</th>
+            <td>Mean (${stats.unit})</th>
+            <td>Standard Deviation (${stats.unit})</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>${stats.samples()}</td>
+            <td>${stats.total().toFixed(2)}</td>
+            <td>${stats.mean().toFixed(2)}</td>
+            <td>${stats.stddev().toFixed(2)}</td>
+          </tr>
+        </tbody>
+      </table>
+      <pre style="overflow:scroll;max-height:100px; max-width:500px;outline:1px solid black">${csv}</pre>
+    `;
+    },
+    false
+  );
+}
+
+for (let bench of Object.keys(benchmarks)) {
+  const hr = document.createElement("hr");
+  document.body.appendChild(hr);
+
+  const button = document.createElement("button");
+  button.innerHTML = `<h2>${bench}</h2>`;
+  document.body.appendChild(button);
+
+  const results = document.createElement("div");
+  document.body.appendChild(results);
+
+  benchOnClick(button, results, bench, benchmarks[bench]);
+}
diff --git a/bench-js/bench.html b/bench-js/bench.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Benchmark Source Maps</title>
+    <meta charset="UTF-8" />
+    <style>
+      table {
+        border-collapse: collapse;
+      }
+      td {
+        border: 1px solid #ccc;
+        padding: 1em;
+      }
+      thead td {
+        font-weight: bold;
+      }
+      tbody td {
+        font-family: monospace;
+        text-align: right;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Benchmark <code>mozilla/source-map</code></h1>
+
+    <form>
+      <p>
+        <label id="warm-up-iters">
+          Warm up iterations:
+          <input type="number" value="5" min="1" max="50" step="1" />
+        </label>
+      </p>
+      <p>
+        <label id="bench-iters">
+          Benchmark iterations:
+          <input type="number" value="100" min="1" max="1000" step="1" />
+        </label>
+      </p>
+      <p>
+        <label>
+          Input source map:
+          <select id="input-map">
+            <option value="SCALA_JS_RUNTIME_SOURCE_MAP" selected>
+              Scala.JS Runtime Source Map (15M)
+            </option>
+            <option value="ANGULAR_MIN_SOURCE_MAP">
+              AngularJS Minified Source Map (424K)
+            </option>
+            <option value="SELF_SOURCE_MAP">
+              Source Map for Minified Version of mozilla/source-map (252K)
+            </option>
+          </select>
+        </label>
+      </p>
+      <p>
+        <label>
+          Multiply size by:
+          <input id="multiply-size-by" type="number" , value="1" , min="1" , max="10" , step="1" />
+        </label>
+      </p>
+      <p>
+        <label>
+          Implementation and Browser:
+          <input id="impl-and-browser" value="<unknown>" />
+        </label>
+      </p>
+    </form>
+
+    <script src="self-source-map.js"></script>
+    <script src="angular-min-source-map.js"></script>
+    <script src="scalajs-runtime-sourcemap.js"></script>
+    <script src="stats.js"></script>
+    <script src="dist/source-map.js"></script>
+    <script src="bench.js"></script>
+    <script src="bench-dom-bindings.js"></script>
+  </body>
+</html>