AnimationWorklet高性能动画实现技巧

AnimationWorklet 是一种突破性的浏览器动画机制，它通过将关键帧计算完全移至独立线程，彻底摆脱主线程阻塞、布局抖动和样式重计算的束缚，从而在纯 DOM 场景下稳定实现 60fps 甚至 120fps 的丝滑动画；它不操作 DOM，也不依赖 requestAnimationFrame，而是以函数式范式——仅基于时间输入声明性地映射 transform、opacity 等可合成属性的目标状态——让动画逻辑与渲染管线深度协同，是构建高性能、高响应式 Web 动画的现代基石。

AnimationWorklet 能让动画逻辑完全脱离主线程运行，避免布局抖动、JS 阻塞和样式重计算带来的卡顿，是实现 60fps 甚至 120fps 原始 DOM 动画的关键技术。它不操作 DOM，而是通过 Animation + WorkletAnimation 协同，把关键帧计算交给独立线程，再由合成器直接驱动 CSS 属性更新。

一、启用 AnimationWorklet 并注册动画类

必须在页面加载早期（如