diff --git a/playground/index.html b/playground/index.html index 5112f78..6537985 100644 --- a/playground/index.html +++ b/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 @@
+
diff --git a/playground/playground.ts b/playground/playground.ts index 551b1ac..1d5221b 100644 --- a/playground/playground.ts +++ b/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((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 { - 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 { + const { promise, resolve } = withResolvers() + // @ts-ignore + scheduler.postTask( + () => { + resolve() + }, + { priority }, + ) + return promise +}