test: improve benchmark

QwikDev · Jan 15, 2022 · 0b6e343 · 0b6e343 · vercel · Jan 15, 2022
1 parent 75ad181
commit 0b6e343
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/tests/benchmarks/benchmark.js b/tests/benchmarks/benchmark.js
@@ -1,16 +1,15 @@
 (() => {
   const h1 = document.getElementById('h1');
-  const h1Title = document.getElementById('title');
-  h1Title.textContent = `${window.ptType} Benchmark`;
   document.title = h1.textContent;
 
   const h1Average = document.getElementById('ave');
+  h1Average.hidden = false;
   const output = document.getElementById('output');
   const results = document.getElementById('results');
 
   const timeBetween = 20;
   const iterateCount = 1000;
-  const runCount = 10;
+  const runCount = 20;
   const runs = [];
 
   const test = (i) => {
@@ -20,14 +19,15 @@
     outer.className = 'c' + i;
     output.appendChild(outer);
 
-    const inner = document.createElement('div');
+    const inner = document.createElement('span');
     inner.textContent = i;
     inner.id = 'i' + i;
     inner.classList.add('a');
     inner.style.color = 'red';
+    inner.tabIndex = i;
     outer.appendChild(inner);
 
-    console.log(inner.style.color);
+    inner.style.color;
   };
 
   const run = () => {
@@ -61,6 +61,7 @@
       const ave = total / runCount;
       h1Average.textContent = `${ave.toFixed(1)}ms`;
       document.title = h1.textContent;
+      h1Average.classList.add('completed');
     }
   };
 

diff --git a/tests/benchmarks/index.html b/tests/benchmarks/index.html
@@ -26,35 +26,62 @@
         text-align: left;
         width: 30px;
       }
+      p a {
+        display: inline-block;
+        padding: 6px 18px;
+        margin: 10px;
+        border: 0.5px solid gray;
+        background-color: #eee;
+        text-decoration: none;
+        border-radius: 4px;
+        color: gray;
+        opacity: 0.8;
+      }
+      p a.active {
+        opacity: 1;
+        color: blue;
+        border-color: blue;
+        background-color: white;
+      }
     </style>
   </head>
   <body>
+    <p>
+      <a id="partytown" href="/benchmarks/">Partytown</a>
+      <a id="mainthread" href="/benchmarks/?mainthread">Main Thread</a>
+    </p>
+
     <h1 id="h1">
-      <span id="title"></span>:
-      <span id="ave">running...</span>
+      <span id="title"></span>
+      <span id="ave" hidden>running...</span>
     </h1>
 
     <table id="results"></table>
 
     <div id="output"></div>
 
-    <script src="/~partytown/debug/partytown.js"></script>
+    <script src="/~partytown/partytown.js"></script>
     <script>
       (() => {
         const script = document.createElement('script');
         script.src = 'benchmark.js';
 
         if (location.search.includes('mainthread')) {
           window.ptType = 'Main Thread';
+          document.getElementById('mainthread').classList.add('active');
         } else {
           if (window.crossOriginIsolated) {
             window.ptType = 'Atomics';
           } else {
             window.ptType = 'Service Worker';
           }
+          document.getElementById('partytown').classList.add('active');
           script.setAttribute('type', 'text/partytown');
         }
 
+        const h1Title = document.getElementById('title');
+        h1Title.textContent = `${window.ptType} Benchmark: `;
+
         document.body.appendChild(script);
       })();
     </script>