浏览器 scheduler.postTask 怎么用：任务优先级、AbortSignal 取消与长任务让路

页面搜索框里有一段昂贵的本地筛选：用户刚输入下一个字符，上一轮结果还在排队，界面就开始发黏。浏览器的 scheduler.postTask() 可以把这类工作放进带优先级的调度队列，并用 AbortSignal 取消尚未开始的旧任务；如果单个任务本身太长，再用 scheduler.yield() 把主线程让给绘制和输入。

最小可用的判断是：需要取消就传 AbortSignal，需要动态调优先级才用 TaskController；不要把一个长循环误当成“已经调度”，它仍然要主动让出主线程。

先做一个可取消的后台任务

先把“用户输入后计算列表”缩成一个可观察的小任务。每次输入都创建一个新的 TaskController，把上一次的 AbortSignal 取消掉；scheduler.postTask 接收回调和选项，回调真正开始前如果信号已经中止，队列不会再把它当作有效结果。

let currentController;

function scheduleFilter(items, keyword) {
  currentController?.abort("superseded");
  currentController = new AbortController();
  const { signal } = currentController;

  if (!globalThis.scheduler?.postTask) {
    return Promise.resolve(filterItems(items, keyword));
  }

  return scheduler.postTask(
    () => filterItems(items, keyword),
    { priority: "background", signal },
  ).catch((error) => {
    if (signal.aborted) return [];
    throw error;
  });
}

这里的调用链是 scheduler.postTask → AbortSignal → catch。catch 只吞掉已确认的旧任务取消；筛选函数自己的异常仍然抛给调用方，否则真实 bug 会被空数组遮住。

priority 不是越高越好：先分清三档队列

postTask() 的静态优先级有 user-blocking、user-visible 和 background 三档。输入反馈、点击后的必要更新适合 user-blocking；普通渲染可以用 user-visible；预计算、日志整理才放到 background。优先级只决定队列先后，不会把同步长循环切碎。

scheduler.postTask(renderSuggestion, { priority: "user-visible" });
scheduler.postTask(rebuildSearchIndex, { priority: "background" });

如果任务需要在滚动或输入时动态升降级，不能同时设置静态 priority。应该把 TaskController.signal 传给 signal，再调用控制器改优先级；只需要中止时，普通 AbortController 更简单。

长任务要主动让出主线程

调度器只能安排任务开始的时机，不能替你拆分回调。假设一次索引重建要处理几万条记录，可以每批处理一小段，再等待 scheduler.yield()。这会让浏览器先处理输入和绘制，之后从同一个异步函数继续。

async function rebuildSearchIndex(rows) {
  for (let offset = 0; offset  setTimeout(resolve, 0));
    }
  }
}

这段代码的边界很具体：background 只代表任务的初始队列优先级，scheduler.yield 才负责把一批处理和下一批处理隔开。降级到 setTimeout 时，仍然要保留分批，否则只是把一整块卡顿推迟了。

浏览器能力检测与结果验收

MDN 将 postTask() 标为 Limited availability，不能只在自己的 Chromium 环境里通过就默认全网可用。上线前至少验收三种状态：支持调度时能得到回调结果；输入快速变化时旧任务能进入取消分支；不支持调度器时普通 Promise 路径仍返回同样的数据。

相关问题

没有取消需求时还要创建 TaskController 吗？

不需要。直接用静态 priority 即可；只有要取消或动态调整优先级时才引入控制器。

AbortSignal 能中断已经开始的同步回调吗？

不能。它主要阻止尚未开始的任务，已经运行的同步循环必须自己检查状态或通过分批与让路退出。

scheduler.yield() 能替代 postTask() 吗？

不能完全替代。yield() 适合拆开当前异步函数，postTask() 更适合独立任务的优先级和取消管理。

小结

先用 postTask() 划分任务优先级，再用 AbortSignal 清理已经过时的工作；遇到真正的长循环，还要用 scheduler.yield() 分批让路。把支持检测、取消结果和降级路径一起验收，才算完成一次可靠的浏览器任务调度改造。