Building a Smarter Scheduler: Priority Queues and Layered Execution

Recap

In the previous article, we explored the relationship between the Scheduler and the dependency Graph, and discussed the challenges of memory management and dependency management.

However, in real-world applications, not all tasks have the same level of urgency:

• Some updates must take effect immediately, such as text input from the user.
• Some updates can be deferred, such as animations or low-priority UI updates.

This is where Priority and Layered Scheduling become important.

Why Do We Need Priority?

Imagine this scenario: a user is typing into an input field through input.onChange, while a large background computation is also running, such as a chart re-render.

If both tasks are placed into the same queue without any priority control, the user input may get blocked, leading to a poor user experience.

The solution: allow high-priority tasks, such as input events, to be processed first, while lower-priority tasks are deferred.

Common Priority Levels

In modern frontend frameworks, scheduling systems usually define priority levels similar to the following:

• Immediate / Sync

  • Examples: text updates in an input field, urgent error messages
  • These must respond immediately and should not be delayed.

• High Priority

  • Main UI interactions, such as state updates triggered by button clicks.

• Normal Priority

  • Most non-critical UI updates.

• Low Priority / Idle

  • Background computation, performance statistics, prefetching, and other non-urgent work.

This ensures that the most important interactions for user experience are always handled first.

Layered Scheduling

Besides priority, another important concept is layering.

We can divide tasks into different layers, where each layer has its own queue, and the Scheduler coordinates the execution between them:

• Computation Layer

  • Signal / Computed updates

• UI Layer

  • DOM updates, Virtual DOM diffing

• I/O Layer

  • Fetch requests, network operations, storage access

• Idle Layer

  • Non-essential background tasks, such as log collection

This design is somewhat similar to an operating system’s CPU scheduler: different types of tasks are managed separately to prevent them from interfering with each other.

Example Architecture

Here is a simplified version of a Scheduler that supports both priority and layering:

type Priority = "immediate" | "high" | "normal" | "low";

interface Job {
  run(): void;
  priority: Priority;
  layer: "compute" | "ui" | "io" | "idle";
}

const queues: Record<Priority, Job[]> = {
  immediate: [],
  high: [],
  normal: [],
  low: [],
};

export function scheduleJob(job: Job) {
  queues[job.priority].push(job);
  requestFlush();
}

function requestFlush() {
  queueMicrotask(flushJobs);
}

function flushJobs() {
  // Execute jobs by priority
  runQueue(queues.immediate);
  runQueue(queues.high);
  runQueue(queues.normal);
  runQueue(queues.low);
}

function runQueue(queue: Job[]) {
  while (queue.length > 0) {
    const job = queue.shift()!;
    job.run();
  }
}

This is a “single-level priority” example.
If we want to introduce real layering, we can further split queues based on Job.layer.

Understanding the Execution Flow Through a Diagram

Performance and Optimization Strategies

• Batching

  • Tasks with the same priority can be merged to avoid duplicated computation.

• Time-Slicing

  • Long-running tasks can be split into smaller chunks to avoid blocking the main thread.
  • React Concurrent Mode uses this kind of strategy.

• Waterfall Execution

  • Run high-priority tasks first, then process lower-priority tasks if there is still enough time.
  • If time is insufficient, low-priority tasks can be deferred to the next tick.

Conclusion

Moving from a single queue to a Scheduler with priority and layering has one major goal:

Preserve interaction responsiveness while maximizing performance utilization.

This is why React introduced Concurrent Features, Vue uses a job queue, and signal-based systems are also starting to design more refined scheduling mechanisms.

In the next article, we will dive deeper into Time-Slicing and Cooperative Scheduling, and explore how a scheduler can keep interactions smooth even when handling expensive tasks.