后台准备快照

捕获一个元素要花几毫秒到几百毫秒，取决于它的尺寸、字体和图片。准备把这份工作提前做掉，remove() 就能立刻开始绘制。

后台准备默认启用，并使用 visible-idle 策略。库不知道稍后会将哪些元素传给 remove()，也不会自行扫描 DOM。每个需要提前捕获的元素都必须传给 register()。即使未注册，remove() 仍可正常工作，但捕获只会在操作开始时进行。设置 preparation: false 可完全关闭后台准备。

注册元素

const effects = new Disintegrator({ preset: 'dust' });

const cards = document.querySelectorAll<HTMLElement>('[data-effects]');

effects.register(cards);

调用 effects.register(cards) 会将这些元素注册为后台准备对象。之后，当元素接近视口且浏览器空闲时，库会创建它们的快照。

停止准备元素

如果需要在调用 destroy() 之前停止观察，请保存 register() 返回的函数：

const stopPreparing = effects.register(cards);

这是前一个注册调用的替代写法；不要对同一批元素调用两次 register()。不再需要后台准备时，调用保存的函数：

stopPreparing();

它只停止观察元素，不会修改 DOM。注册采用引用计数：若两个组件注册了同一节点，每个清理函数只释放自己的注册，二者都释放后才停止观察。

配置条件

const effects = new Disintegrator({
  preset: 'dust',
  preparation: {
    strategy: 'visible-idle',
    rootMargin: '300px 0px',
    concurrency: 1,
    shouldPrepare: (element) => element.matches('[data-effects]'),
    invalidateOnResize: true,
    observeMutations: false,
    cachePixelBudget: 8_000_000,
  },
});

shouldPrepare(element) 在任务排队前执行，可根据元素类型、界面状态、网络或功能开关决定。

显式控制缓存

await effects.prepare(elements); // 立即捕获
effects.invalidate(elements); // 删除旧快照并重新排队
effects.clearPrepared(); // 清空整个缓存

捕获完成后，取消动画可以将快照放回同一个有容量限制的缓存。保留元素的移除操作会保留快照，恢复操作则会为已注册元素保留快照。仅修改效果设置无需重新捕获；失效处理、尺寸检查、缓存淘汰和实例销毁仍然有效。

操作绝不会用一份没把握的快照来做动画。如果快照缺失、还在生成、已经过期或被清出缓存，它会先重新捕获一份。

缓存预算

缓存默认容纳 800 万物理像素，超出时丢弃最久未用的那份快照。只有快照计入其中，保留的 DOM 节点不计。被丢弃的快照会把画布尺寸归零，让浏览器回收后面的内存。

内存紧张的设备应降低预算。只有在测量过实际捕获成本后才提高预算。

失效策略

invalidateOnResize 默认为 true，而 observeMutations 默认为 false，因为观察整个 DOM 子树的成本可能很高。内容外观改变后应主动调用 invalidate()。

启用 observeMutations: true 后，新增节点、文本修改、除 style 之外的属性变化以及后代资源加载都会使快照失效并重新安排后台准备。内联 style 写入只会丢弃过期快照，因为动画库可能每帧更新它，自动重新捕获会形成循环。下一次操作会按需捕获当前状态。若样式只发生一次稳定变化，并希望重新进行后台准备，请调用 invalidate()。

invalidate() 通过 context.invalidate 同时刷新预备 canvas 和捕获引擎。显式 prepare() 也要求刷新；clearPrepared() 后的下一次捕获必须刷新。这包括 DOM 观察器无法检测的 CSSOM 修改。具有独立缓存的自定义适配器必须处理 context.invalidate。