一、基本介绍

Scheduler.yield() 是浏览器 Prioritized Task Scheduling API 提供的一个异步方法。它的作用是让当前任务主动让出主线程控制权，这样浏览器就能先处理用户输入、页面渲染这些高优先级的事情。用上它之后，长任务就不会把页面卡住，也能帮您优化INP指标。

语法很简单：await scheduler.yield()

这个方法返回一个Promise对象，resolve之后会继续执行后面的代码。它本质上就是把一个长任务拆成多个小任务。让出主线程后，任务会以user-visible这个默认优先级继续跑，不会带来额外的延迟。比起setTimeout和requestIdleCallback，这个方法要轻量得多。

二、核心特性

协作式让步，不强制

这个方法只是告诉调度器“我可以先停一下”。调度器会先处理队列里更高优先级的任务，比如点击、滚动、渲染这些，处理完再恢复当前任务。它不是强制切换，也不会保证立刻让出。

优先级继承

如果您在Scheduler.postTask()的回调里调用scheduler.yield()，它会继承那个任务的优先级，可以是user-blocking、user-visible或者background。

可取消

在postTask()关联了AbortSignal的任务中，您可以通过abort()来取消yield之后的继续执行。

浏览器支持

目前Chrome 124以上版本和Edge 124以上版本支持。Firefox和Safari还没有实现，所以做项目的时候记得要做兼容性检测。

三、基础用法（拆分长任务）

// 检测兼容性
if ('scheduler' in navigator && 'yield' in scheduler) {
  async function longTask() {
    for (let i = 0; i < 10000; i++) {
      // 每执行100次，让出主线程一次
      if (i % 100 === 0) {
        await scheduler.yield();
      }
      // 执行耗时计算或者渲染逻辑
      computeHeavyWork(i);
    }
  }
  longTask();
} else {
  // 降级方案：用setTimeout模拟
  async function longTaskFallback() {
    for (let i = 0; i < 10000; i++) {
      if (i % 100 === 0) {
        await new Promise(resolve => setTimeout(resolve, 0));
      }
      computeHeavyWork(i);
    }
  }
}

四、与常见方案对比

五、关键注意事项

1. 必须用await调用，不然不会让出主线程，只会同步执行。

2. 这个方法只在主线程有效。Web Worker里没有scheduler对象。

3. 生产环境一定要做兼容性判断，避免代码报错。

4. 不要过度调用。频繁yield会增加任务切换的开销，反而让性能变差。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13637