Mozilla Performance

Browsing at the Speed of Right
Categories: Uncategorized

Prioritized Task Scheduling API is Prototyped in Nightly

In bug 1734997, we prototyped the Prioritized Task Scheduling API. Having the API prototyped empowers us to experiment with the benefits of this API. It is enabled by default in Nightly at the moment.

Motivation

Prioritized Task Scheduling API allows web developers to control and schedule prioritized tasks in a united and flexible way. We believe this API is going to benefit the web because firstly it has valid use cases as large web frameworks (eg. React has attempted to implement a custom version of it before the spec is standardized). Secondly, the current task scheduling primitives (eg. setTimeout and requestIdleCallback) are inadequate. We think this API is going to provide a more robust solution for scheduling tasks.

All About the API

The scheduler interface is the centralized controller for this API which lives in every window and worker scope. The scheduler interface provides the postTask function that allows us to post tasks with not only different priorities but AbortSignal to allow us to cancel tasks when they are not needed.

Let’s look at some usage of this API. To post a task, we can do something like:

function task() {}
scheduler.postTask(task); // post a task with `user-visible` priority

Prioritized Task Scheduling API provides 3 levels of priorities, they are

  • user-blocking
  • user-visible
  • background

user-blocking is the highest priority, user-visible is the second-highest priority and background is the lowest priority. Each task has a priority associated and user-visible is the default priority.

To post a task with different priorities, we can do something like

function task() {}
await scheduler.postTask(task, {priority: ‘user-blocking’}); const promise = scheduler.postTask(task, {priority: ‘background’});

postTask function also allows us to delay the running of a task for x milliseconds. Sample usage of that is

scheduler.postTask(task, {delay: 100}); // delay the running of the task for 100 milliseconds

Another key concept in postTask is AbortSignal. When using the postTask function, we can pass an AbortSignal instance to allow us to cancel the task after the task is posted.

To pass an AbortSignal and cancel the task afterwards, we could do it as

function task() {}
const aboutController = new AbortController(); // AbortSignal is created via AbortContoller
const promise = scheduler.postTask(task, {signal: aboutController.signal});
aboutController.abort();
// promise is rejected

In addition to canceling the task, we could also pass a TaskSignal to change the priority afterwards. This can be done as

function task() {}
const taskController = new TaskController({priority: 'background'}); // TaskSignal is created via TaskControllerconst promise = scheduler.postTask(task, {signal: taskController.signal});
// TaskController inherits AbortController, so taskContoller.abort() also can be used to cancel the tasktaskController.setPriority("user-blocking");
// A prioritychange event is fired on taskController.signal

Again, this API is behind the dom.enable_web_task_scheduling pref and has only been enabled by default in Nightly since Firefox 101.

What’s Next?

So far we’ve learnt that Airbnb has been using this API with success stories. We will continue to learn and experiment how this API is used in the wild and make decisions based on our learnings. Thanks for your reading and please stay tuned for our future Performance API updates.

No comments yet

Comments are closed, but trackbacks are open.