New Workload: JSDOM + d3

JetStreamDriver.js

@@ -2024,6 +2024,22 @@ let BENCHMARKS = [
         ],
         tags: ["Default", "Proxy"],
     }),
+    new AsyncBenchmark({
+        name: "jsdom-d3-startup",
+        files: [
+            "./jsdom-d3-startup/benchmark.js",
+        ],
+        preload: {
+            // Unminified sources for profiling.
+            // SOURCE_CODE: "./jsdom-d3-startup/dist/bundle.js",
+            SOURCE_CODE: "./jsdom-d3-startup/dist/bundle.min.js",
+            US_DATA: "./jsdom-d3-startup/data/counties-albers-10m.json",
+            AIRPORTS: "./jsdom-d3-startup/data/airports.csv",
+        },
+        tags: ["d3", "startup", "jsdom"],
+        iterations: 10,
+        worstCaseCount: 4,
+    }),
     // Class fields
     new DefaultBenchmark({
         name: "raytrace-public-class-fields",

jsdom-d3-startup/README.md

@@ -0,0 +1,25 @@
+# JSDOM D3 Startup Benchmark
+
+The benchmark reads airport and US geography data, then uses D3 to create a Voronoi diagram of the airports overlaid on a map of the US.
+It uses jsdom to simulate a browser environment for D3 to render to an SVG element.
+
+## JetStream integration
+- We use a custom `./build/build/cache-buster-comment-plugin.cjs` which injects a known comment into every function in the bundle
+- The JetStream benchmark replaces these comments with a unique string per iteration
+- Each benchmark iteration includes parse and top-level eval time
+
+## Setup
+```bash
+# Install node deps from package-lock.json
+npm ci; 
+# Bundle sources to dist/*.
+npm run build
+# Use build:dev for non-minified sources.
+npm run build:dev
+```
+
+# Testing
+```bash
+# Run the basic node benchmark implementation for development. 
+npm run test
+```

jsdom-d3-startup/benchmark-node.cjs

@@ -0,0 +1,21 @@
+const { performance } = require('perf_hooks');
+const fs = require('fs');
+const d3 = require('d3');
+
+async function main() {
+    const { runTest } = await import('./src/test.mjs');
+
+    const usData = JSON.parse(fs.readFileSync('./data/counties-albers-10m.json', 'utf-8'));
+    const airportsData = fs.readFileSync('.//data/airports.csv', 'utf-8');
+
+    const startTime = performance.now();
+
+    const svg = await runTest(airportsData, usData);
+
+    const endTime = performance.now();
+
+    // console.log(svg); // The SVG output
+    console.log(`Execution time: ${endTime - startTime} ms`);
+}
+
+main();

jsdom-d3-startup/benchmark.js

@@ -0,0 +1,83 @@
+// Load D3 and data loading utilities for d8
+
+function quickHash(str) {
+    let hash = 5381;
+    let i = str.length;
+    while (i > 0) {
+        hash = (hash * 33) ^ (str.charCodeAt(i) | 0);
+        i -= 919;
+    }
+    return hash | 0;
+}
+
+const CACHE_BUST_COMMENT = "/*ThouShaltNotCache*/";
+const CACHE_BUST_COMMENT_RE = new RegExp(`\n${RegExp.escape(CACHE_BUST_COMMENT)}\n`, "g");
+
+const EXPECTED_LAST_RESULT_LENGTH = 691366;
+const EXPECTED_LAST_RESULT_HASH = 144487595;
+
+globalThis.clearTimeout = () => { };
+
+class Benchmark {
+    measureStartup = true;
+
+    sourceCode = "";
+    sourceHash = 0;
+    iterationSourceCodes = [];
+    lastResult = "";
+    currentIteration = 0;
+
+    constructor(iterations) {
+        this.iterations = iterations;
+    }
+
+    assert(test, message) {
+        if (!test) {
+            throw new Error(message);
+        }
+    }
+
+    async init(verbose = 0) {
+        this.sourceCode = await JetStream.getString(JetStream.preload.SOURCE_CODE);
+        for (let i = 0; i < this.iterations; i++)
+            this.iterationSourceCodes[i] = this.prepareCode(i);
+
+        this.airportsCsvString = (await JetStream.getString(JetStream.preload.AIRPORTS));
+        this.assert(this.airportsCsvString.length == 145493, `Expected this.airportsCsvString.length to be 141490 but got ${this.airportsCsvString.length}`);
+        this.usDataJsonString = await JetStream.getString(JetStream.preload.US_DATA);
+        this.assert(this.usDataJsonString.length == 2880996, `Expected this.usData.length to be 2880996 but got ${this.usDataJsonString.length}`);
+        this.usData = JSON.parse(this.usDataJsonString);
+    }
+
+    prepareCode(iteration) {
+        if (!this.measureStartup)
+            return this.sourceCode;
+        // Alter the code per iteration to prevent caching.
+        const iterationSourceCode = this.sourceCode.replaceAll(CACHE_BUST_COMMENT_RE, `/*${iteration}*/`);
+        // Warm up hash function.
+        this.sourceHash = quickHash(iterationSourceCode);
+        return iterationSourceCode;
+    }
+
+    runIteration() {
+        let iterationSourceCode = this.iterationSourceCodes[this.currentIteration];
+        if (!iterationSourceCode)
+            throw new Error(`Could not find source for iteration ${this.currentIteration}`);
+        // Module in sourceCode it assigned to the ReactRenderTest variable.
+        let D3Test;
+        eval(iterationSourceCode);
+        const html = D3Test.runTest(this.airportsCsvString, this.usData);
+        this.lastResult = {
+            html,
+            htmlHash: quickHash(html),
+        };
+        this.currentIteration++;
+    }
+
+    validate() {
+        if (this.lastResult.html.length != EXPECTED_LAST_RESULT_LENGTH)
+            throw new Error(`Expected this.lastResult.html.length to be ${EXPECTED_LAST_RESULT_LENGTH} but got ${this.lastResult.length}`);
+        if (this.lastResult.htmlHash != EXPECTED_LAST_RESULT_HASH)
+            throw new Error(`Expected this.lastResult.htmlHash to be ${EXPECTED_LAST_RESULT_HASH} but got ${this.lastResult.htmlHash}`);
+    }
+}

jsdom-d3-startup/build/cache-buster-comment-plugin.cjs

@@ -0,0 +1,29 @@
+// Babel plugin that adds CACHE_BUST_COMMENT to every function body.
+const CACHE_BUST_COMMENT = "ThouShaltNotCache";
+
+
+module.exports = function({ types: t }) {
+  return {
+    visitor: {
+      Function(path) {
+          const bodyPath = path.get("body");
+          // Handle arrow functions: () => "value"
+          // Convert them to block statements: () => { return "value"; }
+          if (!bodyPath.isBlockStatement()) {
+            const newBody = t.blockStatement([t.returnStatement(bodyPath.node)]);
+            path.set("body", newBody);
+          }
+
+          // Handle empty function bodies: function foo() {}
+          // Add an empty statement so we have a first node to attach the comment to.
+          if (path.get("body.body").length === 0) {
+            path.get("body").pushContainer("body", t.emptyStatement());
+          }
+
+          const firstNode = path.node.body.body[0];
+          t.addComment(firstNode, "leading", CACHE_BUST_COMMENT);
+
+      }
+    },
+  };
+};