AnimationWorklet通过将关键帧计算移至独立线程，避免主线程阻塞，实现60/120fps高性能DOM动画；需注册animator类、绑定KeyframeEffect、仅更新transform/opacity等合成属性，并遵循函数式动画范式。
AnimationWorklet 能让动画逻辑完全脱离主线程运行，避免布局抖动、JS 阻塞和样式重计算带来的卡顿，是实现 60fps 甚至 120fps 原始 DOM 动画的关键技术。它不操作 DOM，而是通过 Animation + WorkletAnimation 协同，把关键帧计算交给独立线程，再由合成器直接驱动 CSS 属性更新。
一、启用 AnimationWorklet 并注册动画类
必须在页面加载早期（如 <script></script> 中）调用 registerAnimator，且需确保 Worklet 文件可跨域访问（推荐内联或同源）：
- 主线程中执行：
if ("animationWorklet" in CSS) { CSS.animationWorklet.addModule("./animator.js"); } - animator.js 中导出一个继承自
WorkletAnimation的类，重写animate()方法 - 类名必须为驼峰式，且不能与已注册名称冲突；模块路径支持 data URL 或 blob URL，便于调试时内联
二、编写高效 animator：只读输入，只写输出
animator 的核心是 animate(currentTime, effect) 回调，它每帧被调用一次，运行在独立线程，无法访问 DOM、window 或 document：
-
输入仅限：
currentTime（毫秒级时间戳）、effect（绑定的KeyframeEffect实例） -
输出唯一方式：调用
effect.setKeyframes()更新关键帧（注意：不是修改原 keyframes 对象，而是传入新数组） - 避免任何浮点运算累积误差，建议用
(currentTime % duration) / duration归一化处理循环动画 - 若需响应用户交互（如拖拽），应通过
worklet.postMessage()向主线程发送事件，再由主线程调用animation.updatePlaybackRate()或animation.currentTime控制
三、绑定动画到真实 DOM 元素
主线程创建 KeyframeEffect 和 Animation，但不调用 play()，而是交由 Worklet 管理：
- 用
new KeyframeEffect(element, {}, { duration: Infinity, iterations: Infinity })创建“空效果”，占位属性由 Worklet 动态填充 - 创建
new Animation(effect)后，立即调用animation.play()—— 此时实际执行权已移交 Worklet - 支持的 CSS 属性非常有限：目前仅
transform、opacity、filter（部分浏览器）、background-color（极少数）等可被合成器直接消费的属性；其他如width、left会触发回流，Worklet 中设置无效
四、性能优化与常见陷阱
即便用了 Worklet，错误用法仍会导致掉帧或无动画：
- 避免在
animate()中频繁创建数组或对象 —— 使用预分配数组（如const kf = this._kf || (this._kf = [{}, {}])）复用内存 - 不要依赖
requestAnimationFrame或setTimeout—— Worklet 中这些 API 不可用，所有节奏由合成器控制 - 调试时可用
console.log，但仅在支持 Worklet DevTools 的浏览器（Chrome 95+）中可见；生产环境务必移除 - 若动画需响应滚动，不要监听
scroll事件并 postMessage；改用ScrollTimeline与 Worklet 联动，实现零主线程开销的滚动驱动动画
不复杂但容易忽略：AnimationWorklet 不是“更快的 requestAnimationFrame”，而是把动画从 JS 执行模型中剥离，交还给浏览器合成管线。真正发挥其威力，需要放弃“操作 DOM”的思维，转向“声明目标状态 + 时间映射”的函数式动画范式。
