Add a benchmark suite for parsing and serializing source maps

fitzgen · fitzgen · commit 3830f656313c · 2015-02-18T12:00:27.000-08:00
diff --git a/bench/bench.html b/bench/bench.html
@@ -0,0 +1,45 @@
+<!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 Source Maps</h1>
+
+    <hr/>
+
+    <button id="bench-consumer">
+      <h2>Benchmark Parsing Source Maps</h2>
+    </button>
+    <div id="consumer-results"></div>
+
+    <hr/>
+
+    <button id="bench-generator">
+      <h2>Benchmark Serializing Source Maps</h2>
+    </button>
+    <div id="generator-results"></div>
+
+    <script src="jquery-2.0.1-source-map.js"></script>
+    <script src="stats.js"></script>
+    <script src="../dist/source-map.js"></script>
+    <script src="bench.js"></script>
+  </body>
+</html>
diff --git a/bench/bench.js b/bench/bench.js
@@ -0,0 +1,74 @@
+// Ensure that benchmarks don't get optimized away by calling this blackbox
+// function in your benchmark's action.
+window.__benchmarkResults = [];
+window.benchmarkBlackbox = [].push.bind(window.__benchmarkResults);
+
+// Benchmark running an action n times.
+function benchmark(name, n, action) {
+  window.__benchmarkResults = [];
+
+  // Warm up the JIT.
+  for (var i = 0; i < n; i++) {
+    action();
+  }
+
+  var stats = new Stats("ms");
+
+  console.profile(name);
+  for (var i = 0; i < n; i++) {
+    var start = window.performance.now();
+    action();
+    stats.take(window.performance.now() - start);
+  }
+  console.profileEnd(name);
+
+  return stats;
+}
+
+// Run a benchmark when the given button is clicked and display results in the
+// given element.
+function benchOnClick(button, results, name, n, action) {
+  button.addEventListener("click", function (e) {
+    e.preventDefault();
+    var stats = benchmark(name, n, action);
+    results.innerHTML = `
+      <table>
+        <thead>
+          <tr>
+            <td>Samples</td>
+            <td>Total (${stats.unit})</th>
+            <td>Mean (${stats.unit})</th>
+            <td>Standard Deviation (%)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>${n}</td>
+            <td>${stats.total().toFixed(3)}</td>
+            <td>${stats.mean().toFixed(3)}</td>
+            <td>${stats.stddev().toFixed(2)}</td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+  }, false);
+}
+
+var consumerButton = document.getElementById("bench-consumer");
+var consumerResults = document.getElementById("consumer-results");
+
+benchOnClick(consumerButton, consumerResults, "parse source map", 100, function () {
+  var smc = new sourceMap.SourceMapConsumer(window.jQuerySourceMap);
+  benchmarkBlackbox(smc._generatedMappings);
+});
+
+var generatorButton = document.getElementById("bench-generator");
+var generatorResults = document.getElementById("generator-results");
+
+benchOnClick(generatorButton, generatorResults, "serialize source map", 100, (function () {
+  var smc = new sourceMap.SourceMapConsumer(window.jQuerySourceMap);
+  var smg = sourceMap.SourceMapGenerator.fromSourceMap(smc);
+  return function () {
+    benchmarkBlackbox(smg.toString());
+  };
+}()));
diff --git a/bench/jquery-2.0.1-source-map.js b/bench/jquery-2.0.1-source-map.js
diff --git a/bench/stats.js b/bench/stats.js
@@ -0,0 +1,31 @@
+// Original author: Jim Blandy
+
+function Stats(unit) {
+  this.unit = unit || "";
+  this.x0 = this.x1 = this.x2 = 0;
+}
+
+Stats.prototype.take = function (x) {
+  this.x0 += 1;
+  this.x1 += x;
+  this.x2 += x*x;
+}
+
+Stats.prototype.total = function() {
+  return this.x1;
+}
+
+Stats.prototype.mean = function () {
+  return this.x1 / this.x0;
+}
+
+Stats.prototype.stddev = function () {
+  return Math.sqrt(this.x0 * this.x2 - this.x1 * this.x1) / (this.x0 - 1);
+}
+
+Stats.prototype.toString = function () {
+  return "[Stats " +
+    "total: "  + this.total() + this.unit + ", " +
+    "mean: "   + this.mean()  + this.unit + ", " +
+    "stddev: " + Math.ceil(this.stddev() * 100 / this.mean()) + "%]";
+}
