New Workload: React Server Side Rendering Startup (#116)

Add a new web-ssr  workload that renders a wine-collection using different react components.

Currently the setup uses webpack to build a web-bundle that we can run in the browser.
- We generate two bundles:
  - minified sources with mangled names as default for the benchmark
  - minifed sources with unmangeled names for nicer local profiling (we do have source maps, but we we don't check in the node modules)
- A custom TerserPlugin injects a comment into every function-body
- A last step stringifies the bundled code for later evaling

For cache-busting  new sources are generated for each iteration and the custom comment is replaced with iteration-unique string.

Author: camillobruni

JetStreamDriver.js

@@ -2019,6 +2019,19 @@ let BENCHMARKS = [
         ],
         tags: ["Default", "Proxy"],
     }),
+    new AsyncBenchmark({
+        name: "web-ssr",
+        files: [
+            "./web-ssr/benchmark.js",
+        ],
+        preload: {
+            // Debug Sources for nicer profiling.
+            // BUNDLE_BLOB: "./web-ssr/dist/bundle.js",
+            BUNDLE_BLOB: "./web-ssr/dist/bundle.min.js",
+        },
+        tags: ["Default", "web", "ssr"],
+        iterations: 30,
+    }),
     // Class fields
     new DefaultBenchmark({
         name: "raytrace-public-class-fields",

package-lock.json

@@ -44,5 +44,8 @@
         "local-web-server": "^5.4.0",
         "prettier": "^2.8.3",
         "selenium-webdriver": "^4.35.0"
+    },
+    "dependencies": {
+        "@dapplets/unicode-escape-webpack-plugin": "^0.1.1"
     }
 }

package.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

web-ssr/babel.config.json

@@ -0,0 +1,14 @@
+// node standalone version of the benchmark for local testing.
+
+import { renderTest } from "./src/react-render-test.cjs";
+
+console.log("Starting TypeScript in-memory compilation benchmark...");
+const startTime = performance.now();
+
+renderTest();
+
+const endTime = performance.now();
+const duration = (endTime - startTime) / 1000;
+
+console.log(`TypeScript compilation finished.`);
+console.log(`Compilation took ${duration.toFixed(2)} seconds.`);

web-ssr/benchmark-node.mjs

@@ -0,0 +1,95 @@
+globalThis.console = {
+  log() { },
+  warn() { },
+  assert(condition) {
+    if (!condition) throw new Error("Invalid assertion");
+  }
+};
+
+globalThis.clearTimeout = function () { };
+
+
+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");
+
+// JetStream benchmark.
+class Benchmark {
+  // How many times (separate iterations) should we reuse the source code.
+  // Use 0 to skip.
+  CODE_REUSE_COUNT = 1;
+  iterationCount = 0;
+  iteration = 0;
+  lastResult = {};
+  sourceCode;
+  sourceHash = 0
+  iterationSourceCodes = [];
+
+  constructor(iterationCount) {
+    this.iterationCount = iterationCount
+  }
+
+  async init() {
+    this.sourceCode = await JetStream.getString(JetStream.preload.BUNDLE_BLOB);
+    this.expect("Cache Comment Count", this.sourceCode.match(CACHE_BUST_COMMENT_RE).length, 597);
+    for (let i = 0; i < this.iterationCount; i++)
+      this.iterationSourceCodes[i] = this.prepareCode(i);
+  }
+
+  prepareCode(iteration) {
+    if (!this.CODE_REUSE_COUNT)
+      return this.sourceCode;
+    // Alter the code per iteration to prevent caching.
+    const cacheId = Math.floor(iteration / this.CODE_REUSE_COUNT);
+    const previousSourceCode = this.iterationSourceCodes[cacheId];
+    if (previousSourceCode)
+      return previousSourceCode
+    const sourceCode = this.sourceCode.replaceAll(CACHE_BUST_COMMENT_RE, `/*${cacheId}*/`);
+    // Ensure efficient string representation.
+    this.sourceHash = quickHash(sourceCode);
+    return sourceCode;
+  }
+
+  runIteration() {
+    let sourceCode = this.iterationSourceCodes[this.iteration];
+    if (!sourceCode)
+      throw new Error(`Could not find source for iteration ${this.iteration}`);
+    // Module in sourceCode it assigned to the ReactRenderTest variable.
+    let ReactRenderTest;
+
+    let initStart = performance.now();
+    const res = eval(sourceCode);
+    const runStart = performance.now();
+
+    this.lastResult = ReactRenderTest.renderTest();
+    this.lastResult.htmlHash = quickHash(this.lastResult.html);
+    const end = performance.now();
+
+    const loadTime = runStart - initStart;
+    const runTime = end - runStart;
+    // For local debugging: 
+    // print(`Iteration ${this.iteration}:`);
+    // print(`  Load time: ${loadTime.toFixed(2)}ms`);
+    // print(`  Render time: ${runTime.toFixed(2)}ms`);
+    this.iteration++;
+  }
+
+  validate() {
+    this.expect("HTML length", this.lastResult.html.length, 183778);
+    this.expect("HTML hash", this.lastResult.htmlHash, 1177839858);
+  }
+
+  expect(name, value, expected) {
+    if (value != expected)
+      throw new Error(`Expected ${name} to be ${expected}, but got ${value}`);
+  }
+}

web-ssr/benchmark.js

@@ -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);
+
+      }
+    },
+  };
+};

web-ssr/build/cache-buster-comment-plugin.cjs

@@ -0,0 +1,39 @@
+/**
+ * @license React
+ * react-dom-server-legacy.browser.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-dom-server.browser.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-dom.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */