Scheduler.postTask 怎么设置任务优先级

如果只是让一项工作排在另一项工作前面，直接给 scheduler.postTask() 的第二个参数设置 priority 即可；如果任务优先级会随着页面状态变化，就改用 TaskController 的 signal。三档值是 user-blocking、user-visible 和 background，未指定时默认为 user-visible。

官方资料：https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/postTask

固定任务用 options.priority，动态任务用 TaskSignal；两种方式不要同时配置。这个 API 当前并非所有主流浏览器都可用，生产代码必须先检测能力。

用 options.priority 设置固定优先级

固定优先级适合渲染当前可见区域、响应用户操作或发送不紧急的统计任务。优先级只是调度意图，不等于硬实时保证；浏览器仍会受到当前主线程工作、渲染和其他任务源影响。

// 用三档优先级表达任务紧急程度，不把后台工作塞进交互关键路径
const tasks = [
  scheduler.postTask(() => updateInputState(), {
    priority: "user-blocking",
  }),
  scheduler.postTask(() => renderSecondaryPanel(), {
    priority: "user-visible",
  }),
  scheduler.postTask(() => sendMetrics(), {
    priority: "background",
  }),
];

// Promise 会接收回调返回值；统一收集结果，避免未处理 rejection
Promise.all(tasks).catch((error) => {
  console.error("任务调度失败", error);
});

user-blocking 适合直接影响输入反馈的短任务，user-visible 适合用户能看到但不必抢占输入的更新，background 适合预取和统计。指定 options.priority 后，任务生命周期内不能再修改优先级。

需要变化时改用 TaskController

例如用户正在输入时，过滤任务可以暂时提高优先级；用户离开页面后，又可以把它降为后台任务。此时不要再传 priority，让 TaskSignal 提供初始值并由控制器后续修改。

// 控制器的 signal 提供初始优先级，后续可调用 setPriority 改变它
const controller = new TaskController({ priority: "user-visible" });

const filtering = scheduler.postTask(
  () => filterLargeList(),
  { signal: controller.signal },
);

// 输入阶段提高任务级别；这里不能同时设置 options.priority
controller.setPriority("user-blocking");

filtering
  .then((rows) => renderRows(rows))
  .catch((error) => {
    // 取消任务时应让调用方知道这是可恢复的中断
    if (error.name === "AbortError") return;
    console.error("过滤任务失败", error);
  });

可变优先级的关键判断是：options.signal 必须是 TaskSignal，而不是普通 AbortSignal；若只需要取消而不改优先级，普通的 AbortController 就够用。

把 Promise、取消和 delay 放进错误边界

postTask() 返回 Promise：回调返回什么，Promise 就解析成什么；回调抛错或信号中止时则拒绝。delay 是加入调度队列前的最小等待时间，不保证任务恰好在该时间点执行。

// 用 AbortController 取消已经不需要的后台任务，并显式区分取消与业务异常
const abortController = new AbortController();
const preload = scheduler.postTask(() => preloadNextPage(), {
  priority: "background",
  delay: 200,
  signal: abortController.signal,
});

// 路由离开时取消预加载，避免继续消耗主线程和网络资源
abortController.abort();

preload.catch((error) => {
  if (error.name !== "AbortError") {
    console.error("预加载失败", error);
  }
});

能力检测与兼容策略

MDN 将该接口标记为 Limited availability。入口层先检查 globalThis.scheduler 和 postTask，不支持时可退回 queueMicrotask、setTimeout 或应用自己的队列；降级实现不应假装拥有三档浏览器优先级。

// 只在 API 存在时使用浏览器优先级，否则执行保守降级
function scheduleBackground(work) {
  if (globalThis.scheduler?.postTask) {
    return scheduler.postTask(work, { priority: "background" });
  }

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      try {
        resolve(work());
      } catch (error) {
        reject(error);
      }
    }, 0);
  });
}

常见问题

默认优先级是什么？未设置 priority 且没有带优先级的 TaskSignal 时，默认是 user-visible。

为什么 setPriority 不生效？通常是因为调用 postTask() 时同时设置了 options.priority，或者传入的是不带优先级的 AbortSignal。

实际项目中，先按用户可感知结果区分任务，再决定固定还是动态优先级；不要把所有任务都标成 user-blocking，否则调度意图就失去区分度。