npm 包 scheduler 介绍

scheduler 是一个用于浏览器环境下协作调度（cooperative scheduling）的 npm 包。它目前被 React 内部广泛使用，并计划未来将其变得更加通用，适用于更多场景。

基本信息

最新版本：0.26.0
发布时间：3个月前（持续活跃维护）
依赖数：0（无依赖，轻量级）
周下载量：超过4200万次
许可证：MIT
仓库地址 ：GitHub - facebook/react
主页：react.dev

主要用途

scheduler 主要用于任务调度，尤其是在需要将大量计算任务分批处理、避免阻塞主线程的场景下。它通过"协作调度"机制，让高优先级任务优先执行，低优先级任务延后执行，从而提升前端应用的响应速度和用户体验。

目前，React 的并发特性（如 Concurrent Mode）就是基于 scheduler 实现的。虽然该包的公共 API 还未最终确定，但它已经在 React 生态中扮演着重要角色。

安装方法

你可以通过 npm 直接安装：

bash 复制代码

npm i scheduler

主要特性

协作调度：允许开发者将任务分片，避免长时间阻塞主线程。
优先级管理：支持为不同任务分配不同优先级，保证关键任务优先执行。
无依赖：包本身没有依赖，体积小，易于集成。
TypeScript 支持：通过 @types/scheduler 提供类型声明。

基本用法

scheduler 提供了几个核心 API，常用的有 unstable_scheduleCallback 和 unstable_cancelCallback，用于调度和取消任务。以下是一个简单的使用示例：

js 复制代码

import { unstable_scheduleCallback, unstable_NormalPriority } from 'scheduler';

// 调度一个普通优先级的任务
const callbackId = unstable_scheduleCallback(unstable_NormalPriority, () => {
  console.log('执行任务');
  // 可以返回一个函数用于任务中断时的清理
  return () => {
    console.log('任务被中断或取消');
  };
});

// 取消任务
// unstable_cancelCallback(callbackId);

常用优先级

unstable_ImmediatePriority：最高优先级，立即执行
unstable_UserBlockingPriority：用户交互相关
unstable_NormalPriority：普通优先级
unstable_LowPriority：低优先级
unstable_IdlePriority：空闲时执行

更详细的用例

1. 不同优先级任务调度对比

js 复制代码

import {
  unstable_scheduleCallback,
  unstable_ImmediatePriority,
  unstable_UserBlockingPriority,
  unstable_NormalPriority,
  unstable_LowPriority,
  unstable_IdlePriority
} from 'scheduler';

unstable_scheduleCallback(unstable_LowPriority, () => {
  console.log('低优先级任务');
});
unstable_scheduleCallback(unstable_ImmediatePriority, () => {
  console.log('立即执行任务');
});
unstable_scheduleCallback(unstable_NormalPriority, () => {
  console.log('普通优先级任务');
});
// 输出顺序通常为：立即执行任务 -> 普通优先级任务 -> 低优先级任务

2. 任务分片处理大计算量

js 复制代码

import { unstable_scheduleCallback, unstable_NormalPriority, shouldYield } from 'scheduler';

function bigTask() {
  let i = 0;
  function work() {
    while (i < 1e6) {
      // 每处理一部分就检查是否需要让出主线程
      if (shouldYield()) {
        console.log('让出主线程，防止卡顿');
        unstable_scheduleCallback(unstable_NormalPriority, work);
        return;
      }
      i++;
    }
    console.log('大任务处理完毕');
  }
  work();
}

unstable_scheduleCallback(unstable_NormalPriority, bigTask);

3. 如何中断/取消任务

js 复制代码

import { unstable_scheduleCallback, unstable_cancelCallback, unstable_NormalPriority } from 'scheduler';

const callbackId = unstable_scheduleCallback(unstable_NormalPriority, () => {
  console.log('执行任务');
});

// 某些情况下需要取消任务
unstable_cancelCallback(callbackId);

4. 与 setTimeout 的对比

scheduler 的任务调度比 setTimeout 更智能，能根据主线程空闲情况动态调整执行时机，减少页面卡顿。

js 复制代码

// setTimeout 方式，可能导致主线程阻塞
setTimeout(() => {
  // 大量计算
}, 0);

// scheduler 方式，自动分片，响应更流畅
import { unstable_scheduleCallback, unstable_NormalPriority } from 'scheduler';
unstable_scheduleCallback(unstable_NormalPriority, () => {
  // 大量计算
});

典型场景

在动画、复杂计算等场景下，将任务分片，避免页面卡顿。
在 React 并发模式下，自动由 React 调用，无需手动调度。

适用场景

React 应用开发 ：如果你在使用 React 的并发特性，scheduler 已经在底层为你服务。
需要任务分片的前端应用：如动画、复杂计算、数据可视化等场景，避免页面卡顿。
自定义调度器开发 ：可以基于 scheduler 实现更复杂的任务调度逻辑。

总结

scheduler 是由 React 团队维护的高性能调度库，虽然目前主要服务于 React，但未来有望成为前端通用的调度解决方案。如果你对前端性能优化、任务调度有兴趣，值得关注和学习这个包。

更多信息请参考 npm 官方页面。