idlize 是由 GoogleChromeLabs 开源的浏览器空闲任务工具包，它基于requestIdleCallback()API 封装了一组助手类和助手方法，帮助开发者轻松实现idle-until-urgent（空闲时执行、紧急时立即执行）的前端性能优化模式。项目体积小、API 简单、兼容所有主流浏览器（甚至支持到 IE 9+），非常适合刚接触浏览器空闲回调的新手学习。

一、先搞懂什么是 idle-until-urgent 模式？

浏览器在同一时刻只能处理一件事。当页面在滚动、响应用户输入时，如果还去执行耗时的初始化逻辑（预加载数据、生成复杂对象等），就会造成卡顿。

idle-until-urgent模式的核心思想很简单：

• 🛋️空闲时（idle）：把"不紧急"的重活放到浏览器空闲间隙执行，不占用用户交互的时间；
• 🚨紧急时（urgent）：一旦用户真的需要这个值了，就取消空闲等待，立即同步执行并返回结果。

而浏览器原生的requestIdleCallback()API 虽然能实现"空闲时执行"，但它只是原始调度工具，缺少队列管理、取消控制、页面卸载兜底等能力。idlize 正是在这个基础上补齐了工程化能力的工具包。

二、一分钟认识 idlize 📦

idlize 不是一个"大打包"库，而是由若干独立的小模块组成，每个功能都可以按需单独引入（详见 package.json 与 README.md）。

三、快速安装：一行命令上手

通过 npm 安装即可开始使用：

npm install idlize

由于每个助手是独立发布的模块，使用时分别引入对应的.mjs文件：

import {IdleQueue} from 'idlize/IdleQueue.mjs' import {IdleValue} from 'idlize/IdleValue.mjs' import {defineIdleProperty} from 'idlize/defineIdleProperty.mjs'

四、五大核心模块一览 🧩

1. IdleValue：让"贵"的值在空闲时悄悄准备好

IdleValue.mjs#L23 中定义了一个IdleValue类：构造时传入一个初始化函数，它会立即被安排到下一次空闲时刻执行；一旦调用getValue()，若空闲执行还没发生，就取消空闲回调、同步立即计算并返回结果。另有setValue()方法用于外部直接赋值。典型场景：构造函数里预计算一份重数据，用到时"想取就取、绝不等待"。

2. defineIdleProperty / defineIdleProperties：类属性也能"懒而快"

defineIdleProperty.mjs#L25 提供了defineIdleProperty(obj, prop, init)助手：它在对象上定义一个 getter/setter，底层复用IdleValue实现。也就是说，this.data看起来像普通属性，实际却在空闲期自动初始化、被引用时立即就绪。如果需要一次初始化多个属性，使用批量版本defineIdleProperties(obj, props)更省事，例如在类的构造函数中把data等字段声明为"空闲属性"。

3. IdleQueue：给空闲任务排好队

IdleQueue.mjs#L32 中的IdleQueue是功能最丰富的模块，相比直接使用requestIdleCallback()有四大优势：

• ✅保证执行：可开启ensureTasksRun选项，通过页面生命周期监听（visibilitychange等）确保页面卸载前队列任务跑完；
• ✅随时急转：runTasksImmediately()可让队列任务立即同步执行；
• ✅时间预算控制：任务可设置minTaskTime最小剩余空闲时间，空闲时间不够就不启动；
• ✅状态快照：任务入队时记录时间戳与document.visibilityState，执行时以{time, visibilityState}形式传给任务函数。

常用方法还包括pushTask()（尾部入队）、unshiftTask()（头部插队）、hasPendingTasks()、clearPendingTasks()和destroy()。隐藏页面时会改用微任务队列执行，确保卸载阶段也能跑完任务（内部依赖 lib/queueMicrotask.mjs 和 lib/now.mjs）。

4. idle-callback-polyfills：让 rIC/cIC 全浏览器可用

idle-callback-polyfills.mjs 导出两个函数：

• rIC(callback)：浏览器支持requestIdleCallback()就用原生，否则退化为基于setTimeout()的轻量 shim；
• cIC(handle)：对应取消空闲回调，降级方案为clearTimeout()。

它不是"完全等价"的 polyfill，但保证了所有浏览器里都能获得基本的空闲任务能力，是其余模块的底层依赖。

五、浏览器兼容性一览 🌐

项目已在所有主流浏览器中测试通过：

六、项目结构与目录导览 🔍

仓库结构非常清晰，方便按需阅读源码：

idlize/ ├── IdleQueue.mjs # 空闲任务队列 ├── IdleValue.mjs # 空闲值 ├── defineIdleProperty.mjs # 单个空闲属性 ├── defineIdleProperties.mjs # 批量空闲属性 ├── idle-callback-polyfills.mjs # rIC/cIC 兼容层 ├── lib/ # 内部小工具（now、queueMicrotask） ├── docs/ # 五个模块的详细 API 文档 ├── test/ # 各模块测试用例 └── README.md # 项目说明与安装指引

想深入了解某个模块的参数表和返回值，直接查看 docs/ 目录下的对应文档即可；测试用例位于 test/ 目录（如 test/IdleQueue-test.mjs），本地还附有 test/index.html 用于浏览器内运行验证。

七、总结

idlize 是 GoogleChromeLabs 出品的一个"小而美"的浏览器空闲任务工具包，用IdleValue、IdleQueue、defineIdleProperty等五个模块把idle-until-urgent模式沉淀成了开箱即用的 API。对于想要优化首屏性能、又不想被requestIdleCallback()原始细节绊住的新手来说，它是快速上手的理想选择：npm install idlize一条命令，按模块引入，几分钟就能让页面的"重活"学会见缝插针地执行。🚀