This is a polyfill for the Prioritized Task Scheduling API. Documentation can be found on MDN.
The polyfill includes implementations of Scheduler
, exposed through
self.scheduler
, as well as TaskController
and TaskPriorityChangeEvent
classes.
The implementation uses a combination of setTimeout
, MessageChannel
, and
requestIdleCallback
to implement task scheduling, falling back to setTimeout
when other APIs are not available.
The polyfill, like the native implementation, runs scheduler
tasks in
descending priority order ('user-blocking'
> 'user-visible'
>
'background'
). But there are some differences in the relative order of
non-scheduler
tasks:
-
"background"
tasks are scheduled usingrequestIdleCallback
on browsers that support it, which provides similar scheduling asscheduler
. For browsers that don't support it, these tasks do not have low/idle event loop priority. -
"user-blocking"
tasks have the same event loop scheduling prioritization as"user-visible"
(similar tosetTimeout()
), meaning these tasks do not have a higher event loop priority.
The polyfill does not support priority or signal
inheritance,
so all continuations are scheduled with "user-visible"
continuation priority.
The scheduling behavior of this depends on whether the browser supports
scheduler.postTask()
(i.e. older Chrome versions):
-
For browsers that support
scheduler.postTask()
,scheduler.yield()
is polyfilled with"user-blocking"
scheduler.postTask()
tasks. This means they typically have a higher event loop priority than other tasks (consistent withyield()
), but they can be interleaved with other"user-blocking"
tasks. -
On browsers that don't support
scheduler.postTask()
, the same event loop prioritization as thepostTask()
polyfill applies (see above), but continuations run between"user-blocking"
and"user-visible"
tasks.
A browser that supports ES6 is required for this polyfill.
npm install scheduler-polyfill
Import to populate the task-scheduling global variables, if not already available in the executing browser:
import 'scheduler-polyfill';
<script src="https://unpkg.com/scheduler-polyfill"></script>
git clone https://github.com/GoogleChromeLabs/scheduler-polyfill
cd scheduler-polyfill
npm i
npm test # Tests should pass
npm run build # Outputs minified polyfill to dist/
<script src="/path_to_polyfill/scheduler-polyfill.js"></script>