表格行排序后需通过记录oldIndex、计算delta并用transform: translateY()配合transition实现位次变化的视觉反馈，insertBefore保持节点基准稳定，requestAnimationFrame在DOM批量变更后调用，移动端加will-change优化，IE11降级为脉冲背景色动画。
表格行排序后如何让位次变化有视觉反馈
直接用 sort() 重排 <tbody> 行，DOM 位置变了但用户看不出“谁升了、谁降了”。关键不是重排本身，而是得标记出哪些行发生了位次偏移，并给它们加过渡动画。纯 CSS 的 transform: translateY() 配合 transition 最轻量，比 JS 动画帧更稳。
- 先用
Array.from(trList).map((tr, i) => ({ tr, oldIndex: tr.dataset.oldIndex ? Number(tr.dataset.oldIndex) : i }))记录每行“上一轮”的逻辑位置 - 重排后遍历新顺序，对每个
tr计算delta = newIndex - oldIndex，设为data-delta - CSS 写
tr[data-delta] { transition: transform 0.3s ease; }和tr[data-delta="1"] { transform: translateY(-24px); }（按行高调） - 注意：
transform会触发硬件加速，但若表格用了border-collapse: collapse，某些浏览器下transform可能导致边框渲染异常，可临时切为separate再切回
为什么 insertBefore 比 appendChild 更适合位次动画
用 appendChild 把所有行清空再逐个追加，会丢失原有 DOM 节点的 offsetTop 基准，导致 translateY 计算失准；而 insertBefore 保持节点在文档流中的相对插入点，动画起始位置可控。
- 重排时遍历新顺序数组，对每个
tr调用tbody.insertBefore(tr, referenceTr)，referenceTr 是它在新顺序里的前一个tr - 必须在插入前统一清除所有
data-delta，否则旧 delta 会干扰新一帧 - 如果某行从第 5 名升到第 2 名，它要跨过 2 个兄弟节点，
insertBefore自动处理中间节点位移，CSS 动画自然连贯 - 避免在循环里反复读取
tr.offsetTop——这个值在重排过程中会因 layout thrashing 变动，只应在插入完成后统一读一次用于调试校验
requestAnimationFrame 在积分榜刷新中该在哪一层调用
不是“每次数据来都包一层 requestAnimationFrame”，而是仅在 DOM 批量变更完成后的渲染前一刻调用，否则可能被浏览器合并或丢帧。
- 把排序、
dataset更新、insertBefore全部同步执行完，最后用requestAnimationFrame(() => { /* 清除旧 delta、触发重排 */ }) - 不要在
fetch回调里直接调requestAnimationFrame，网络延迟会导致帧不均匀；应统一走状态队列，比如用Promise.resolve().then(() => render())做微任务节流 - 如果 1 秒内收到 3 次积分更新，只渲染最后一次——用
clearTimeout(pendingTimer)+pendingTimer = setTimeout(render, 16)控制最小间隔 - 移动端 Safari 对
transform+transition的复合动画有渲染 bug，需额外加will-change: transform到tr，但仅在 delta ≠ 0 时动态添加，避免全局开销
IE11 兼容下位次动画的降级策略
IE11 不支持 transform 在 <tr> 上的 transition，也不能用 insertBefore 触发原生动画，只能靠 class 切换模拟“闪动”提示。
立即学习“前端免费学习笔记（深入）”；
- 检测
!window.CSS || !CSS.supports('transform', 'translateY(0)')，命中则跳过所有 transform 逻辑 - 改用
tr.classList.add('rank-up')/.rank-down，配 CSS@keyframes rank-pulse { 0% { background: #d4edda; } 100% { background: transparent; } } - IE 下
dataset不可用，改用getAttribute('data-old-index')和setAttribute('data-old-index', i) - 不要试图在 IE 里模拟平滑位移——重排瞬间完成，用户注意力在数字变化本身，加个 200ms 脉冲背景色比强行做位移更有效
位次动画真正的难点不在怎么动，而在“动之前确认数据已稳定、动之后确保状态可追溯”。哪怕只是多存一个 oldIndex，也能避免动画错位后无法对齐实际排名。
