perf: clean interface for benchmarks

aidenybai · Jun 14, 2021 · e8b2653 · e8b2653
1 parent ec562aa
commit e8b2653
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 31 deletions.
diff --git a/benchmarks/conditional-render.js b/benchmarks/conditional-render.js
@@ -1,12 +1,12 @@
 const conditionalRender = (() => {
   const suite = new Benchmark.Suite();
   let app;
-  let output = '';
+  let output = '<b>conditional-render:</b><br />';
 
   const benchmark = suite
     .add('million', {
       setup() {
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>conditional-render</b>: Running <code>million</code> benchmarks... (Check console for realtime results)';
         const el = Million.createElement(Million.m('div', { id: 'app' }));
         document.body.appendChild(el);
         app = el;
@@ -22,7 +22,7 @@ const conditionalRender = (() => {
     })
     .add('virtual-dom', {
       setup() {
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>conditional-render</b>: Running <code>virtual-dom</code> benchmarks... (Check console for realtime results)';
         const vnode = virtualDom.h('div', {
           id: 'app',
         });
@@ -46,7 +46,7 @@ const conditionalRender = (() => {
     })
     .add('vanilla', {
       setup() {
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>conditional-render</b>: Running <code>vanilla</code> benchmarks... (Check console for realtime results)';
         const el = document.createElement('div');
         el.id = 'app';
         document.body.appendChild(el);
@@ -68,7 +68,7 @@ const conditionalRender = (() => {
     })
     .add('baseline', {
       setup() {
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>conditional-render</b>: Running <code>baseline</code> benchmarks... (Check console for realtime results)';
         const el = document.createElement('div');
         el.id = 'app';
         document.body.appendChild(el);
@@ -80,13 +80,14 @@ const conditionalRender = (() => {
     })
     .on('cycle', ({ target }) => {
       console.log(String(target));
-      output += `${String(target)}\n`;
+      output += `${String(target)}<br />`;
     })
     .on('complete', () => {
-      const message = `Fastest is ${benchmark.filter('fastest').map('name')}`;
+      const message = `<i>Fastest is <b>${benchmark.filter('fastest').map('name').join(', ')}</b></i>`;
       console.log(message);
-      output += `${message}\n`;
-      document.body.innerText = output;
+      output += `${message}<br /><br />`;
+      output += `<button onclick="window.location.reload()">Reload</button><br />`;
+      document.body.innerHTML = output;
     });
 
   return () => benchmark.run({ async: true });

diff --git a/benchmarks/index.html b/benchmarks/index.html
@@ -5,7 +5,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://cdn.jsdelivr.net/combine/npm/lodash@4.17.21,npm/platform@1.3.6,npm/benchmark@2.1.4"></script>
     <script src="https://cdn.jsdelivr.net/npm/virtual-dom@2.1.1/dist/virtual-dom.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
+    <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css"
+    />
+    <style>
+      body {
+        text-align: center;
+      }
+      button {
+        background: black;
+      }
+      button:hover {
+        background: rgba(0, 0, 0, 0.8);
+      }
+      #app {
+        visibility: hidden;
+      }
+    </style>
     <script src="https://unpkg.com/million"></script>
     <!-- <script src="../dist/million.min.js"></script> -->
     <script src="./text-interop.js"></script>
@@ -14,8 +32,20 @@
     <title>Million Benchmarks</title>
   </head>
   <body>
-    <button onclick="textInterop()"><code>text-interop</code></button>
-    <button onclick="listRender()"><code>list-render</code></button>
-    <button onclick="conditionalRender()"><code>conditional-render</code></button>
+    <button onclick="textInterop()" title="Swaps the text inside a div#app with Date.now()">
+      text-interop
+    </button>
+    <button
+      onclick="listRender()"
+      title="Pushes Date.now() to a growing children array and sets the children of div#app"
+    >
+      list-render
+    </button>
+    <button
+      onclick="conditionalRender()"
+      title="Swaps text inside div#app on random int to satisfy condition with Date.now()"
+    >
+      conditional-render
+    </button>
   </body>
 </html>
diff --git a/benchmarks/list-render.js b/benchmarks/list-render.js
@@ -1,14 +1,14 @@
 const listRender = (() => {
   const suite = new Benchmark.Suite();
   let app;
-  let output = '';
+  let output = '<b>list-render:</b><br />';
   let children = [];
 
   const benchmark = suite
     .add('million', {
       setup() {
         children = [];
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>list-render</b>: Running <code>million</code> benchmarks... (Check console for realtime results)';
         const el = Million.createElement(Million.m('div', { id: 'app' }));
         document.body.appendChild(el);
         app = el;
@@ -21,7 +21,7 @@ const listRender = (() => {
     .add('virtual-dom', {
       setup() {
         children = [];
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>list-render</b>: Running <code>virtual-dom</code> benchmarks... (Check console for realtime results)';
         const vnode = virtualDom.h('div', {
           id: 'app',
         });
@@ -47,7 +47,7 @@ const listRender = (() => {
     .add('vanilla', {
       setup() {
         children = [];
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>list-render</b>: Running <code>vanilla</code> benchmarks... (Check console for realtime results)';
         const el = document.createElement('div');
         el.id = 'app';
         document.body.appendChild(el);
@@ -72,7 +72,7 @@ const listRender = (() => {
     .add('baseline', {
       setup() {
         children = [];
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>list-render</b>: Running <code>baseline</code> benchmarks... (Check console for realtime results)';
         const el = document.createElement('div');
         el.id = 'app';
         document.body.appendChild(el);
@@ -84,13 +84,14 @@ const listRender = (() => {
     })
     .on('cycle', ({ target }) => {
       console.log(String(target));
-      output += `${String(target)}\n`;
+      output += `${String(target)}<br />`;
     })
     .on('complete', () => {
-      const message = `Fastest is ${benchmark.filter('fastest').map('name')}`;
+      const message = `<i>Fastest is <b>${benchmark.filter('fastest').map('name').join(', ')}</b></i>`;
       console.log(message);
-      output += `${message}\n`;
-      document.body.innerText = output;
+      output += `${message}<br /><br />`;
+      output += `<button onclick="window.location.reload()">Reload</button><br />`;
+      document.body.innerHTML = output;
     });
 
   return () => benchmark.run({ async: true });

diff --git a/benchmarks/text-interop.js b/benchmarks/text-interop.js
@@ -1,12 +1,12 @@
 const textInterop = (() => {
   const suite = new Benchmark.Suite();
   let app;
-  let output = '';
+  let output = '<b>text-interop:</b><br />';
 
   const benchmark = suite
     .add('million', {
       setup() {
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>text-interop</b>: Running <code>million</code> benchmarks... (Check console for realtime results)';
         const el = Million.createElement(Million.m('div', { id: 'app' }));
         document.body.appendChild(el);
         app = el;
@@ -17,7 +17,7 @@ const textInterop = (() => {
     })
     .add('virtual-dom', {
       setup() {
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>text-interop</b>: Running <code>virtual-dom</code> benchmarks... (Check console for realtime results)';
         const vnode = virtualDom.h('div', {
           id: 'app',
         });
@@ -41,7 +41,7 @@ const textInterop = (() => {
     })
     .add('vanilla', {
       setup() {
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>text-interop</b>: Running <code>vanilla</code> benchmarks... (Check console for realtime results)';
         const el = document.createElement('div');
         el.id = 'app';
         document.body.appendChild(el);
@@ -63,7 +63,7 @@ const textInterop = (() => {
     })
     .add('baseline', {
       setup() {
-        document.body.innerHTML = '';
+        document.body.innerHTML = '<b>text-interop</b>: Running <code>baseline</code> benchmarks... (Check console for realtime results)';
         const el = document.createElement('div');
         el.id = 'app';
         document.body.appendChild(el);
@@ -75,13 +75,14 @@ const textInterop = (() => {
     })
     .on('cycle', ({ target }) => {
       console.log(String(target));
-      output += `${String(target)}\n`;
+      output += `${String(target)}<br />`;
     })
     .on('complete', () => {
-      const message = `Fastest is ${benchmark.filter('fastest').map('name')}`;
+      const message = `<i>Fastest is <b>${benchmark.filter('fastest').map('name').join(', ')}</b></i>`;
       console.log(message);
-      output += `${message}\n`;
-      document.body.innerText = output;
+      output += `${message}<br /><br />`;
+      output += `<button onclick="window.location.reload()">Reload</button><br />`;
+      document.body.innerHTML = output;
     });
 
   return () => benchmark.run({ async: true });