🧪 improve playground

playground/index.html

@@ -26,7 +26,7 @@
                 color: black;
                 position: relative;
                 display: inline-block;
-                margin-top: 100px;
+                margin-top: 40px;
                 font-size: 24px;
                 left: 0;
                 animation: moveText 0.5s linear infinite;
@@ -50,6 +50,7 @@
         </div>
         <br />
         <div>
+            <button id="queue-task">queueTask()</button>
             <button id="simulate-work">simulateWork()</button>
             <button id="post-task-vs-yield-or-continue">postTask() vs yieldOrContinue()</button>
         </div>

playground/playground.ts

@@ -43,6 +43,9 @@ document.querySelector('#post-task-background')!.addEventListener('click', () =>
 document.querySelector('#post-task-vs-yield-or-continue')!.addEventListener('click', () => {
     postTaskVsYieldOrContinue()
 })
+document.querySelector('#queue-task')!.addEventListener('click', () => {
+    runQueueTask()
+})
 
 async function run(strategy: SchedulingStrategy, time: number = 1000) {
     const start = Date.now()
@@ -60,7 +63,7 @@ async function run(strategy: SchedulingStrategy, time: number = 1000) {
 }
 
 async function runPostTask(priority: 'user-blocking' | 'user-visible' | 'background') {
-    const totalTime = 1000
+    const totalTime = 5000
     const singleTaskTime = 2
     const iterations = Math.round(totalTime / singleTaskTime)
     for (let i = 0; i < iterations; i++) {
@@ -77,6 +80,14 @@ async function runPostTask(priority: 'user-blocking' | 'user-visible' | 'backgro
     }
 }
 
+async function runQueueTask(time: number = 1000) {
+    const start = Date.now()
+    while (Date.now() - start < time) {
+        await new Promise<void>((resolve) => queueTask(resolve))
+        simulateWork()
+    }
+}
+
 function simulateWork(): void {
     // a 5x5 matrix
     const matrixA = [
@@ -119,15 +130,6 @@ function matrixMultiplication(matrix1: number[][], matrix2: number[][]) {
     return result
 }
 
-function postTask(): Promise<void> {
-    const { promise, resolve } = withResolvers()
-    // @ts-ignore
-    scheduler.postTask(() => {
-        resolve()
-    })
-    return promise
-}
-
 async function postTaskVsYieldOrContinue() {
     {
         const start = performance.now()
@@ -157,3 +159,15 @@ async function postTaskVsYieldOrContinue() {
         console.log(count.toString(), '→ yieldOrContinue()')
     }
 }
+
+async function postTask(priority?: 'user-blocking' | 'user-visible' | 'background'): Promise<void> {
+    const { promise, resolve } = withResolvers()
+    // @ts-ignore
+    scheduler.postTask(
+        () => {
+            resolve()
+        },
+        { priority },
+    )
+    return promise
+}