Add support for running benchmarks in a browser

To view, run `yarn ember server` and then visit `localhost:4200/bench` in a browser. Running under `node` is still supported.
BackburnerJS · Oct 10, 2022 · ae8a9cf · ae8a9cf
1 parent af77b18
commit ae8a9cf
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -75,3 +75,17 @@ The following code will only cause a single DOM manipulation:
   </body>
 </html>
 ```
+
+## Benchmarks
+
+The `/bench` directory includes a number of performance benchmarks.
+
+To run in `node`:
+
+```bash
+yarn ember build
+node ./bench/index.js # (all benchmarks)
+node ./bench/index.js ./bench/benches/some-file.js # (specific benchmark)
+```
+
+Or to run in a browser, run `yarn ember server`, and visit `http://localhost:4200` in a browser. Be aware that having the developer tools open/closed can affect JS performance.
diff --git a/bench/benches/debounce-cancel.js b/bench/benches/debounce-cancel.js
@@ -1,5 +1,3 @@
-var Backburner = require('../../dist/backburner').default;
-
 function sharedSetup() {
   var backburner = new this.Backburner(["sync", "actions", "routerTransitions", "render", "afterRender", "destroy", "rsvpAfter"]);
 

diff --git a/bench/benches/later-cancel.js b/bench/benches/later-cancel.js
@@ -1,5 +1,3 @@
-var Backburner = require('../../dist/backburner').default;
-
 function sharedSetup() {
   var backburner = new this.Backburner(["sync", "actions", "routerTransitions", "render", "afterRender", "destroy", "rsvpAfter"]);
 

diff --git a/bench/benches/schedule-cancel.js b/bench/benches/schedule-cancel.js
@@ -1,5 +1,3 @@
-var Backburner = require('../../dist/backburner').default;
-
 function sharedSetup() {
   var backburner = new this.Backburner(["sync", "actions", "routerTransitions", "render", "afterRender", "destroy", "rsvpAfter"]);
 

diff --git a/bench/benches/schedule-flush.js b/bench/benches/schedule-flush.js
@@ -1,5 +1,3 @@
-var Backburner = require('../../dist/backburner').default;
-
 function prodSetup() {
   var backburner = new this.Backburner(["sync", "actions", "routerTransitions", "render", "afterRender", "destroy", "rsvpAfter"]);
 

diff --git a/bench/benches/throttle-cancel.js b/bench/benches/throttle-cancel.js
@@ -1,5 +1,3 @@
-var Backburner = require('../../dist/backburner').default;
-
 function sharedSetup() {
   var backburner = new this.Backburner(["sync", "actions", "routerTransitions", "render", "afterRender", "destroy", "rsvpAfter"]);
 

diff --git a/bench/browser-bench.js b/bench/browser-bench.js
@@ -0,0 +1,29 @@
+import bench from "do-you-even-bench";
+import Benchmark from "benchmark";
+window.Benchmark = Benchmark;
+
+import DebounceCancel from "./benches/debounce-cancel";
+import LaterCancel from "./benches/later-cancel";
+import ScheduleCancel from "./benches/schedule-cancel";
+import ScheduleFlush from "./benches/schedule-flush";
+import ThrottleCancel from "./benches/throttle-cancel";
+
+const suites = [
+  DebounceCancel,
+  LaterCancel,
+  ScheduleCancel,
+  ScheduleFlush,
+  ThrottleCancel,
+].flat();
+
+const searchParams = new URLSearchParams(window.location.search);
+const filter = searchParams.get("filter");
+
+if (filter) {
+  document.querySelector("input[name=filter]").value = filter;
+  suites = suites.filter((s) =>
+    s.name.toLowerCase().includes(filter.toLowerCase())
+  );
+}
+
+bench(suites);
diff --git a/bench/index.html b/bench/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Backburner.js Benchmarks</title>
+</head>
+<body>
+  <form method="get">
+    <label for="filter">Filter by benchmark name:</label>
+    <input name="filter" type="text" />
+    <button type="submit">Go</button>
+  </form>
+  <pre id="output">
+  </pre>
+  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
+  <script src="../loader.js"></script>
+  <script src="../named-amd/backburner.js"></script>
+  <script src="lodash.js"></script>
+  <script src="browser-bench.js"></script>
+  <script>
+    window.Backburner = require("backburner").default;
+    require("browser-bench");
+  </script>
+</body>
+</html>
diff --git a/bench/index.js b/bench/index.js
@@ -15,6 +15,8 @@ if (process.argv[2]) {
   console.log(fileGlob);
 }
 
+globalThis.Backburner = require("../dist/backburner").default;
+
 var suites = [];
 glob.sync(fileGlob).forEach(function(file) {
   var exported = require( path.resolve( file ) );

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -89,8 +89,8 @@ module.exports = function (app) {
       files: ['qunit.css', 'qunit.js']
     }),
     new Funnel(path.dirname(require.resolve('loader.js')), {
-      annotation: 'tests/loader.js',
-      destDir: 'tests',
+      annotation: 'loader.js',
+      destDir: '',
       files: ['loader.js']
     }),
     new Funnel(compiled, {
@@ -108,7 +108,35 @@ module.exports = function (app) {
     new Funnel(__dirname + '/tests', {
       destDir: 'tests',
       files: ['index.html']
-    })
+    }),
+    new Funnel(__dirname + "/bench", {
+      destDir: "bench",
+      files: ["index.html"],
+    }),
+    new Rollup(__dirname + "/bench", {
+      rollup: {
+        treeshake: false,
+        input: "browser-bench.js",
+        external: ["backburner"],
+        plugins: [
+          resolve(),
+          commonjs(),
+          loadWithInlineMap(),
+        ],
+        output: [
+          {
+            file: "bench/browser-bench.js",
+            format: "amd",
+            amd: { id: "browser-bench" },
+            sourcemap: true,
+          },
+        ],
+      },
+    }),
+    new Funnel(path.dirname(require.resolve("lodash")), {
+      destDir: "bench",
+      files: ["lodash.js"],
+    }),
   ], {
     annotation: 'dist'
   });

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "ember-cli-inject-live-reload": "2.0.2",
     "glob": "^7.1.6",
     "loader.js": "^4.7.0",
+    "lodash": "^4.17.21",
     "lolex": "^6.0.0",
     "qunit": "^2.14.1",
     "release-it": "^14.2.1",

diff --git a/tests/index.html b/tests/index.html
@@ -12,7 +12,7 @@
   <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
   <script src="qunit.js"></script>
   <script src="/testem.js"></script>
-  <script src="loader.js"></script>
+  <script src="/loader.js"></script>
   <script src="../named-amd/backburner.js"></script>
   <script src="../named-amd/tests.js"></script>
   <script>