perf: add benchmark output

aidenybai · Oct 2, 2021 · 90e5573 · 90e5573
1 parent a3d18da
commit 90e5573
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 30 deletions.
diff --git a/benchmarks/index.html b/benchmarks/index.html
@@ -8,13 +8,59 @@
       type="image/svg+xml"
       href="https://raw.githubusercontent.com/aidenybai/million/main/.github/assets/icon.svg"
     />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.5.min.css"
-    />
     <title>Million Benchmarks</title>
   </head>
   <body>
+    <a
+      href="https://github.com/aidenybai/million"
+      class="github-corner"
+      aria-label="View source on GitHub"
+      ><svg
+        width="80"
+        height="80"
+        viewBox="0 0 250 250"
+        style="fill: #151513; color: #fff; position: absolute; top: 0; border: 0; right: 0"
+        aria-hidden="true"
+      >
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path
+          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+          fill="currentColor"
+          style="transform-origin: 130px 106px"
+          class="octo-arm"
+        ></path>
+        <path
+          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+          fill="currentColor"
+          class="octo-body"
+        ></path></svg></a
+    ><style>
+      .github-corner:hover .octo-arm {
+        animation: octocat-wave 560ms ease-in-out;
+      }
+      @keyframes octocat-wave {
+        0%,
+        100% {
+          transform: rotate(0);
+        }
+        20%,
+        60% {
+          transform: rotate(-25deg);
+        }
+        40%,
+        80% {
+          transform: rotate(10deg);
+        }
+      }
+      @media (max-width: 500px) {
+        .github-corner:hover .octo-arm {
+          animation: none;
+        }
+        .github-corner .octo-arm {
+          animation: octocat-wave 560ms ease-in-out;
+        }
+      }
+    </style>
     <script src="./main.mjs" type="module"></script>
   </body>
 </html>
diff --git a/benchmarks/main.mjs b/benchmarks/main.mjs
@@ -1,6 +1,6 @@
 import 'style.css';
 
-import { m, createElement, style } from '../src/index';
+import { m, createElement, style, patch } from '../src/index';
 
 import appendManyRowsToLargeTable from './suites/appendManyRowsToLargeTable';
 import clearRows from './suites/clearRows';
@@ -25,48 +25,63 @@ const suites = [
 ].map((suite) =>
   suite
     .on('cycle', (event) => {
-      console.log(String(event.target));
+      log(String(event.target));
     })
     .on('complete', () => {
-      console.log(`Fastest is ${suite.filter('fastest').map('name')}`);
+      log(`Fastest is ${suite.filter('fastest').map('name')}`);
     }),
 );
 
-const el = createElement(
+const logs = [];
+
+const vnode = () =>
   m('div', undefined, [
-    m('h1', undefined, 'Benchmarks'),
-    'Open console to check for results. This benchmark is compliant with ',
+    m('h3', undefined, 'Million Benchmarks'),
+    'This benchmark is compliant with ',
     m('a', { href: 'https://github.com/krausest/js-framework-benchmark', target: '_blank' }, [
-      'JS Framework Benchmark',
+      'JS Framework Benchmark.',
     ]),
     m('br'),
     m('br'),
+    'Please note that Benchmark results are unstable. To have more stable results:',
+    m('ol', undefined, [
+      m('li', undefined, ['Restart OS. Do not run any applications. Put power cable to laptop.']),
+      m('li', undefined, ['Run tests 5 times.']),
+      m('li', undefined, ['Take the best result for each candidate.']),
+    ]),
     ...suites.map((suite) =>
-      m('div', { style: style({ padding: '5px' }) }, [
-        m(
-          'button',
-          {
-            onclick: () => {
-              console.log(`\nRunning: ${suite.name}`);
-              suite.run({ async: true });
-            },
-          },
-          [suite.name],
-        ),
-      ]),
-    ),
-    m('div', { style: style({ padding: '5px' }) }, [
       m(
         'button',
         {
           onclick: () => {
-            suites.forEach((suite) => suite.run({ async: true }));
+            log(`\nRunning: ${suite.name}`);
+            suite.run({ async: true });
           },
+          style: style({ margin: '5px' }),
         },
-        ['All'],
+        [suite.name],
       ),
-    ]),
-  ]),
-);
+    ),
+    m(
+      'button',
+      {
+        onclick: () => {
+          suites.forEach((suite) => suite.run({ async: true }));
+        },
+        style: style({ margin: '5px' }),
+      },
+      ['all'],
+    ),
+    m('br'),
+    logs.length && m('pre', undefined, [m('code', undefined, [logs.join('\n')])]),
+  ]);
+
+const el = createElement(vnode());
+
+const log = (message) => {
+  logs.push(message);
+  patch(el, vnode());
+  console.log(String(message));
+};
 
 document.body.appendChild(el);