Improving Long-Running JavaScript Tasks with scheduler.yield in Chrome 129

In front-end development, long-running JavaScript tasks are a tricky problem. They cause page unresponsiveness, affecting user experience. Traditionally developers use setTimeout() to split long tasks, but this method has clear drawbacks. Chrome 129 introduced a new, more efficient method: scheduler.yield() . This article explores this new technique and compares its advantages and disadvantages with the traditional approach.

Long Task Issues

To illustrate the problem of long tasks, the article presents an example involving Unicode character codes and visual representations. Many vertical rectangles appear, and the goal is to filter out unassigned code points by iterating through a range of Unicode characters.

The following code demonstrates the processing, which freezes the page for about 4279 ms. During this period the browser cannot update the screen, and characters are only displayed after the script finishes, leading to a poor user experience.

const MIN = 127734, MAX = 129686;

function insertChar(code, parent) {
    parent.insertAdjacentText('beforeend', String.fromCodePoint(code));
}

function add(i, parent) {
    if (!likeNull(i)) // compare character i and 0 on canvas
        insertChar(i, parent);
}

function one(div) {
    for (let i = MIN; i < MAX; i++)
        add(i, div);
}

function onClick(func) {
    btn.addEventListener('click', async () => {
        btn.remove();
        const start = Date.now();
        await func(div);
        div.insertAdjacentText("afterend", Date.now() - start);
    });
}

onClick(one);

Therefore, when a task runs for a long time, it must be paused to allow the browser to repaint the screen. Similar statements can be used to temporarily suspend or interrupt long code execution.

Using setTimeout() to Split Tasks

The traditional solution is to use setTimeout() to split the task:

function pause() {
    return new Promise(resolve => setTimeout(resolve));
}

async function two(div) {
    for (let i = MIN; i < MAX; i++) {
        await pause();
        add(i, div);
    }
}

onClick(two);

This method keeps the page responsive, but the total execution time increases dramatically to about 17 568 ms.

Disadvantages of setTimeout()

1. Minimum timeout of 4 ms even when set to 0

Even if the browser has nothing to do, the main task will pause for at least 4 ms. The minimum timeout is >4 ms. In the first page, evaluating 1 952 code points takes 4 279 ms (~2 ms per code point). In the second page, the same evaluation takes 17 568 ms (~9 ms per code point). The page remains responsive, but performance degrades noticeably due to the cumulative timeout.

2. Tasks are placed at the end of the queue, causing priority issues

When a task is paused, setTimeout() enqueues it as a new task at the very end of the queue. Consequently, the browser updates the screen only after all queued tasks have run, potentially delaying the resumed task.

In the page above, two two() functions run simultaneously:

onClick(() => Promise.race([two(div), two(div2)]));

The first two() is submitted to the main thread, and the second two() executes before the first continues. Execution time rises from about 17 s to 23 s, but not double, because most of the time is spent in the minimum timeouts.

scheduler.yield(): New Solution

scheduler.yield() provides a more efficient way to yield the main thread:

async function three(div) {
    for (let i = MIN; i < MAX; i++) {
        await scheduler.yield();
        add(i, div);
    }
}

onClick(three);

Using scheduler.yield() , the execution time drops to about 5 646 ms, significantly better than the setTimeout() approach.

Advantages of scheduler.yield()

Higher performance: execution time is closer to that of an uninterrupted task.

Priority handling: paused tasks are placed at the front of the queue instead of the end.

Example comparison:

// Run two three() functions simultaneously
onClick(() => Promise.race([three(div), three(div2)]));

// Compare three() with the setTimeout‑based two()
onClick(() => Promise.race([three(div), two(div2)]));

The result differs from the index4.html based on setTimeout() only in execution time. 10 183 ms equals two runs of 5 645 ms. Both tasks appear to have no priority.

Priority seems ineffective because both three() functions are not waiting in the queue. However, when compared with the setTimeout() method, scheduler.yield() shows a clear priority advantage.

Conclusion

scheduler.yield() offers a powerful new tool for JavaScript task scheduling. It delivers better performance and handles task priority more effectively. For front‑end developers dealing with long‑running tasks, it is a technique worth considering and adopting.

In practice, developers can use scheduler.yield() in scenarios such as processing large data sets, performing complex calculations, or executing frequent DOM operations. This helps keep the page responsive without significantly affecting execution efficiency. As browser support expands, scheduler.yield() is expected to become an important tool for front‑end performance optimization.

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读