Vanilla JavaScript Projects

Project 46, Hardware and performance

Scheduler API Demo

The spinning ball and the text box show how smooth the page feels. Run the same heavy job three ways and watch which one keeps the page responsive.

one long task
Main API
Scheduler API
Methods
postTask, yield
Dependencies
None
Your browser
Checking

Feel the difference

Blocking

One long loop. Nothing else can run.

setTimeout chunks

Stops every 10 ms, then waits in the back of the queue.

scheduler.yield()

Stops every 10 ms, then continues first.

Red marks show frames that took longer than 50 ms during the last run.

Priorities

    How it works

    1. Break the workThe heavy job is a loop. Every few milliseconds it stops to let the browser handle input and paint.
    2. Yield smartlyawait scheduler.yield() pauses and then continues ahead of other queued tasks, so the job still finishes quickly.
    3. PrioritizepostTask runs callbacks by priority, so user-blocking work jumps ahead of background work.
    async function processAll(items) {
  let last = performance.now();
  for (const item of items) {
    doWork(item);
    if (performance.now() - last > 10) {         // every 10 ms...
      await scheduler.yield();                   // ...let input and paint happen
      last = performance.now();
    }
  }
}
scheduler.postTask(() => saveDraft(), { priority: "background" });
scheduler.postTask(() => showMenu(), { priority: "user-blocking" });  // runs first