What is the scheduler API and how does it improve INP?
Answer
The Scheduler API (scheduler.postTask()) provides fine-grained control over task execution priority on the main thread. Unlike setTimeout(fn, 0) (always low priority), the Scheduler API allows prioritizing tasks: user-blocking: highest priority — for work critical to user interactions. user-visible: medium — for visual updates the user will see. background: lowest — for non-urgent work. Usage: scheduler.postTask(() => heavyWork(), { priority: "background" }). scheduler.yield(): yield control back to the browser, then resume — crucial for INP: async function handleClick() { updateUI(); await scheduler.yield(); await processBigDataset(); }. By yielding after the initial UI update, the browser can paint the response to the click before the slow computation runs — improving INP. TaskController: cancel or reprioritize tasks dynamically. Impact on INP: breaking long tasks into yielded chunks prevents the 50ms+ blocking that causes poor INP. React 18's concurrent rendering uses a similar internal scheduler. scheduler.yield() is now the recommended way to chunk long tasks in event handlers.
Previous
What is server-sent events vs WebSockets for performance?
Next
What is speculation rules API and prerendering?
More Web Performance Questions
View all →- Advanced What is speculation rules API and prerendering?
- Advanced How do JavaScript virtual machines optimize JavaScript performance?
- Advanced What is the Islands Architecture and partial hydration for performance?
- Advanced What are Container Queries and their performance implications?
- Advanced How do you implement performance observability in production?