Web 优先任务调度 API

December 1, 2024

bcd

定义

declare global {
    /**  用于使用优先级任务调度 API 的全局 {@link Scheduler} 入口点。*/
    const scheduler: Scheduler;

    interface Scheduler {
        /**
         * 将任务作为回调添加到调度程序，可选择指定优先级、延迟和/或用于中止任务的信号。
         * @param callback 实现任务的回调函数。回调的返回值用于 resolve 此函数返回的 Promise。
         * @param options {@link SchedulerPostTaskOptions} 选项。
         */
        postTask<T extends unknown>(callback: () => T, options?: SchedulerPostTaskOptions): Promise<T>;
        /** 返回一个 Promise，当 await 时，会让出事件循环，允许在新任务中继续执行。*/
        yield(): Promise<void>;
    }
}

/** 决定任务运行顺序的任务优先级。*/
type TaskPriority = "user-blocking" | "user-visible" | "background";

type SchedulerPostTaskOptions = {
    /**
     * 任务的不可变 {@link TaskPriority}。值为 `"user-blocking"`、`"user-visible"` 或 `"background"` 之一。
     * 若设置，则此优先级将用于任务的整个生命周期，并将忽略在 `signal` 上设置的优先级。
     */
    priority?: TaskPriority;
    /** 一个 {@link AbortSignal} 或 {@link TaskSignal}，可用于中止或重新确定任务的优先级（通过其关联的控制器）。若设置了 `priority`，则信号的优先级将被忽略。*/
    signal?: AbortSignal | TaskSignal;
    /**
     * 将任务添加到调度程序队列后的最短时间（以毫秒为单位）。
     * 实际延迟可能高于指定值，但不会低于指定值。默认延迟为 0。
     */
    delay?: number;
};

declare global {
    /** 扩展 AbortController，允许设置和更改关联 TaskSignal 的优先级。*/
    class TaskController extends AbortController {
        constructor(options?: TaskControllerOptions);
        /** 与此控制器关联的 TaskSignal。*/
        readonly signal: TaskSignal;
        /** 设置关联 TaskSignal 的优先级。*/
        setPriority(priority: TaskPriority): void;
    }

    /** 当 TaskSignal 的优先级更改时触发的事件。*/
    class TaskPriorityChangeEvent extends Event {
        constructor(type: string, init: TaskPriorityChangeEventInit);
        /** 更改前的优先级。*/
        readonly previousPriority: TaskPriority;
    }

    /** 扩展 AbortSignal 以包含优先级信息和 prioritychange 事件。*/
    class TaskSignal extends AbortSignal {
        /** 此信号的当前优先级。*/
        readonly priority: TaskPriority;
        /** 当此信号的优先级更改时触发的事件处理程序。*/
        onprioritychange: (event: TaskPriorityChangeEvent) => void;
    }
}

type TaskControllerOptions = {
    /** TaskController 创建时 TaskSignal 的初始优先级。*/
    priority?: TaskPriority;
};

interface TaskPriorityChangeEventInit extends EventInit {
    /** 更改前的优先级。*/
    previousPriority: TaskPriority;
}

可中断任务

优化耗时长的任务的本质是防止主线程阻塞。

主线程一次只能处理一个任务。任何用时超过 50 毫秒的任务都是耗时较长的任务。对于耗时超过 50 毫秒的任务，任务的总时间减去 50 毫秒称为任务的阻塞时段。

scheduler.yield 提供一种简洁的机制，允许我们显式将主线程让出给（浏览器）事件循环。

async function slowTask() {
    firstHalfOfWork();
    await scheduler.yield(); // 让出主线程
    secondHalfOfWork();
}

scheduler.yield 可以简单的看作是 scheduler.postTask 的封装

// from https://github.com/GoogleChromeLabs/scheduler-polyfill
function schedulerYield() {
    // Use 'user-blocking' priority to get similar scheduling behavior as
    // scheduler.yield(). Note: we can't reliably inherit priority and abort since
    // we lose context if async functions are spread across multiple tasks.
    return self.scheduler.postTask(() => {}, { priority: "user-blocking" });
}

scheduler.postTask 允许我们向某些（浏览器实现的）任务队列提交任务，并允许指定任务优先级为以下三个之一：

user-blocking
阻止用户与页面交互的任务。这包括将页面渲染到可以使用的程度，或响应用户输入。
user-visible（默认值）
用户可见但不一定会阻止用户操作的任务。这可能包括呈现页面的非必要部分，如非必要的图像或动画。
background
时间不紧迫的任务。这可能包括日志处理或初始化渲染不需要的第三方库。

还可以通过 TaskController/TaskSignal 实现可变优先级。

function saveSettings() {
    // Validate the form at high priority
    scheduler.postTask(validateForm, { priority: "user-blocking" });

    // Show the spinner at high priority:
    scheduler.postTask(showSpinner, { priority: "user-blocking" });

    // Update the database in the background:
    scheduler.postTask(saveToDatabase, { priority: "background" });

    // Update the user interface at high priority:
    scheduler.postTask(updateUI, { priority: "user-blocking" });

    // Send analytics data in the background:
    scheduler.postTask(sendAnalytics, { priority: "background" });
}

可以简单的将三种优先级视为下面三种队列：

user-blocking: MessageChannel.postMessage user-visible: setTimeout background: requestIdleCallback

题外话：React scheduler

对于库来说，可能需要更粒度化的优先级，React scheduler 中包含 NoPriority ImmediatePriority UserBlockingPriority NormalPriority LowPriority IdlePriority 优先级。实现所谓“时间切片”。

任务调度的入口函数如下：

// taskQueue: 最小堆，存储所有准备好执行的任务，按过期时间排序
// timerQueue: 最小堆，存储延迟执行的任务，按开始时间排序

function unstable_scheduleCallback(
    priorityLevel: PriorityLevel,
    callback: Callback,
    options?: { delay: number },
): Task {
    var currentTime = getCurrentTime();

    var startTime;
    if (typeof options === "object" && options !== null) {
        var delay = options.delay;
        if (typeof delay === "number" && delay > 0) {
            startTime = currentTime + delay;
        } else {
            startTime = currentTime;
        }
    } else {
        startTime = currentTime;
    }

    var timeout;
    switch (priorityLevel) {
        case ImmediatePriority:
            // Times out immediately
            timeout = -1;
            break;
        case UserBlockingPriority:
            // Eventually times out
            timeout = userBlockingPriorityTimeout;
            break;
        case IdlePriority:
            // Never times out
            timeout = maxSigned31BitInt;
            break;
        case LowPriority:
            // Eventually times out
            timeout = lowPriorityTimeout;
            break;
        case NormalPriority:
        default:
            // Eventually times out
            timeout = normalPriorityTimeout;
            break;
    }

    var expirationTime = startTime + timeout;

    var newTask: Task = {
        id: taskIdCounter++,
        callback,
        priorityLevel,
        startTime,
        expirationTime,
        sortIndex: -1,
    };

    if (startTime > currentTime) {
        // This is a delayed task.
        newTask.sortIndex = startTime;
        push(timerQueue, newTask);
        if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
            // All tasks are delayed, and this is the task with the earliest delay.
            if (isHostTimeoutScheduled) {
                // Cancel an existing timeout.
                cancelHostTimeout();
            } else {
                isHostTimeoutScheduled = true;
            }
            // Schedule a timeout.
            requestHostTimeout(handleTimeout, startTime - currentTime);
        }
    } else {
        newTask.sortIndex = expirationTime;
        push(taskQueue, newTask);
        // Schedule a host callback, if needed. If we're already performing work,
        // wait until the next time we yield.
        if (!isHostCallbackScheduled && !isPerformingWork) {
            isHostCallbackScheduled = true;
            requestHostCallback();
        }
    }

    return newTask;
}

任务调度过程如下：

调用 unstable_scheduleCallback 函数，传入任务的优先级、回调函数和可选的延迟时间
unstable_scheduleCallback 函数会创建一个 Task 对象，包含任务的优先级、回调函数、开始时间、过期时间等信息
根据任务的 startTime (当前时间 + 延迟时间)，判断任务是否需要延迟执行
如需延迟执行，将任务添加到 timerQueue 中；否则添加到 taskQueue 中
如果调度器当前空闲（isHostCallbackScheduled 为 false 且 isPerformingWork 为 false），则调用 requestHostCallback 函数
requestHostCallback 函数会将 performWorkUntilDeadline 函数添加到主线程的消息队列中
当主线程空闲时，会执行 performWorkUntilDeadline 函数
performWorkUntilDeadline 函数会调用 flushWork 函数
flushWork 函数会调用 workLoop 函数，循环执行 taskQueue 中的任务，直到队列为空或时间切片耗尽
在 workLoop 的循环中，会调用 advanceTimers 函数，将 timerQueue 中到期的任务转移到 taskQueue 中

在浏览器中，调度器基于 MessageChannel.postMessage 实现。它可以看作是入队优先级较高的宏任务，而 setTimeout 会有（HTML 标准定义的）4ms 延迟时间问题。
另外，注意微任务执行完毕后，不会将控制权返回给事件循环。

另外可以发现，React schedular 源码也在实验性使用 Scheduler postTask API。

←Back to home

This work is licensed under CC BY-NC-SA 4.0