数据加载完成后再启动动画，通过fetch回调触发、CSS变量驱动、差异更新、预解析缓存等策略保障性能与稳定性。
动画启动前必须等数据加载完成
直接在 requestAnimationFrame 循环里发请求会导致动画帧被阻塞，或更糟：动画已开始但数据还没回来，画面卡在初始状态。正确做法是把动画逻辑封装成函数，只在 fetch() 的 .then() 或 async/await 成功回调里触发。
- 用
loading = true控制按钮/入口禁用，避免重复请求 - 失败时调用
cancelAnimationFrame()清理残留帧循环 - 服务端返回结构要稳定，比如统一用
{ items: [...] }，别让前端动画逻辑去适配字段名变化
用 CSS 自定义属性（CSS Custom Properties）驱动动画值
JS 获取数据后，不直接操作 element.style.transform，而是更新 document.documentElement.style.setProperty('--progress', value)，再在 CSS 里用 transform: scale(var(--progress)); 绑定。这样动画由浏览器原生合成线程处理，不触发重排，性能远好于 JS 改 style。
document.querySelector('#chart').dataset.loaded = 'true';
document.documentElement.style.setProperty('--data-count', data.items.length);
document.documentElement.style.setProperty('--max-value', Math.max(...data.values));- 务必在设置 CSS 变量前确保元素已挂载（可用
requestIdleCallback延迟非关键更新） - 数值记得转成字符串传入，
setProperty('--opacity', 0.7)会报错，得写'0.7' - IE 不支持 CSS 变量，如需兼容，改用
element.setAttribute('data-value', ...)+ 属性选择器
动画中动态响应数据更新（非首次加载）
比如实时仪表盘每 5 秒轮询新数据，不能每次全量重绘 DOM。应比对新旧数据差异，只对变化的项触发动画：用 oldData.map((v, i) => v !== newData[i]) 生成变更掩码，再对 true 位置的元素添加 animate() 或切换 class。
- 避免在
setInterval里无条件调用requestAnimationFrame，容易堆叠未完成帧 - 用
AbortController中断上一轮未完成的请求，防止旧响应覆盖新动画状态 - 数值插值建议用
linear interpolation (lerp)而非硬切，例如：current = current + (target - current) * 0.1;
Canvas 动画绑定 JSON 数据时的内存陷阱
用 canvas.getContext('2d') 绘图时，若每帧都 JSON.parse(xhr.responseText)，大体积数据（如 10MB GeoJSON）会频繁触发 GC，造成动画掉帧。应提前解析并缓存结果对象，动画循环中只读取引用。
立即学习“前端免费学习笔记（深入）”；
let parsedData = null;
fetch('/api/chart-data.json')
.then(r => r.json())
.then(data => {
parsedData = data; // 仅解析一次
startAnimationLoop(); // 启动 requestAnimationFrame 循环
});- Canvas 尺寸变化时（如响应式），务必重新调用
canvas.width = canvas.offsetWidth等，否则绘图会拉伸失真 - 不要在动画帧内做深拷贝（
structuredClone或 LodashcloneDeep），开销太大 - 离屏 canvas（
document.createElement('canvas')）适合预渲染静态图层，减少主 canvas 绘制压力
数据驱动动画的关键不在“怎么动”，而在“什么时候动、依据什么动、动错了怎么收场”。网络延迟、解析耗时、DOM 更新时机、Canvas 清除逻辑——这些环节漏掉一个，动画就从表现力变成 bug 发射器。
