Add Benchmark

bogas04 · Nov 27, 2017 · b557ca0 · b557ca0
1 parent f5c017e
commit b557ca0
Show file tree

Hide file tree

Showing 12 changed files with 17,407 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules/
+.DS_Store
diff --git a/benchmark/App.js b/benchmark/App.js
diff --git a/benchmark/README.md b/benchmark/README.md
@@ -0,0 +1,27 @@
+# Benchmark
+
+The benchmark basically compares three servers.
+  * NodeJS (without streaming) - base case
+  * Marinate for NodeJS (without streaming) - this is to find overheard of using marinate
+  * Marinate for NodeJS (with streaming) - this is to see how well streaming performs.
+
+The benchmark uses a test website created in [CSS Streaming](https://github.com/samccone/streaming-css).
+This is no way close to a normal web app, however it is a good site to see benefits of streaming of CSS and HTML.
+
+# Results
+
+We performed LightHouse audit on these three servers.
+
+| Case | Audit Result |
+|:--|:--|
+| Base Case | ![Raw static](raw-static.png) |
+| Marinate w/o Streaming  | ![Marinate without streaming](marinate-static.png)
+| Marinate w/ Streaming | ![Marinate with streaming](marinate-stream.png)
+
+| Case | First Meaning Paint |  First Interactive
+|:--|:--|:--|
+| Base Case | 5080 ms |  15,310 ms
+| Marinate w/o Streaming | 4950 ms | 15,020 ms
+| Marinate w/ Streaming | 5020 ms | 14,550 ms
+
+
diff --git a/benchmark/marinate-static.png b/benchmark/marinate-static.png
diff --git a/benchmark/marinate-stream.png b/benchmark/marinate-stream.png
diff --git a/benchmark/marinate_static.js b/benchmark/marinate_static.js
@@ -0,0 +1,30 @@
+const express = require('express')
+const { createElement: h } = require('react')
+const marinate = require('marinate')
+const { renderToString } = require('react-dom/server')
+const path = require('path')
+const { readFileSync } = require('fs')
+
+const App = require('./App')
+
+const app = express()
+
+const template = marinate`
+  <!doctype html>
+  <html>
+    <head>
+      <style>
+        ${readFileSync(path.resolve(__dirname, 'style.css'), 'utf-8')}
+      </style>
+    </head>
+    <body>
+      ${renderToString(h(App, null))}
+    </body>
+  </html>
+`
+
+app
+  .get('/', (req, res) => template(res))
+  .listen(1337, () => console.log('Server listening on port 1337'))
+
+
diff --git a/benchmark/marinate_stream.js b/benchmark/marinate_stream.js
@@ -0,0 +1,30 @@
+const express = require('express')
+const { createElement: h } = require('react')
+const marinate = require('marinate')
+const { renderToNodeStream } = require('react-dom/server')
+const path = require('path')
+const { createReadStream } = require('fs')
+
+const App = require('./App')
+
+const app = express()
+
+const template = marinate`
+  <!doctype html>
+  <html>
+    <head>
+      <style>
+        ${() => createReadStream(path.resolve(__dirname, 'style.css'))}
+      </style>
+    </head>
+    <body>
+      ${() => renderToNodeStream(h(App, null))}
+    </body>
+  </html>
+`
+
+app
+  .get('/', (req, res) => template(res))
+  .listen(1337, () => console.log('Server listening on port 1337'))
+
+