Use scheduler.yield() to break up long tasks
March 10, 2025
A page feels sluggish and unresponsive when long tasks keep the main thread busy, preventing it from doing other important work, like responding to user input. As a result, even built-in form controls can appear broken to users—as if the page were frozen—never mind more complex custom components.scheduler.yield() is a way of yielding to the main thread—allowing the browser to run any pending high-priority work—then continuing execution where it left off. This keeps a page more responsive and, in turn, helps improve Interaction to Next Paint (INP).scheduler.yield offers an ergonomic API that does exactly what it says: execution of the function it’s called in pauses at the await scheduler.yield() expression and yields to the main thread, breaking up the task. The execution of the rest of the function—called the continuation of the function—will be scheduled to run in a new event-loop task.
Source: Use scheduler.yield() to break up long tasks | Blog | Chrome for Developers
A great talk by Nishu Goel a couple of years back covered yielding as a performance technique (JavaScript being single threaded means long tasks can make for sluggish (or frozen) interfaces.
Here’s an in-depth look at scheduler.yield, a way to yield to the main thread. While Chromium browsers only, it can be used in a progressively enhancing way, which is covered as well.
