requestAnimationFrame实现高性能弹幕滚动的核心是避免强制同步布局、减少重排重绘、批量更新DOM、复用元素并严格匹配屏幕刷新率；需用raf驱动主循环、transform位移替代left/top、弹幕池复用、容器分层渲染及可见性裁剪。
用 requestAnimationFrame 实现高性能弹幕滚动，核心在于避免强制同步布局、减少重排重绘、批量更新 DOM、合理复用元素，并让动画节奏严格跟随屏幕刷新率（通常 60fps）。它比 setTimeout 或 setInterval 更精准、更节能，也更利于浏览器优化。
一、用 requestAnimationFrame 驱动主循环，不手动控制帧率
不要自己算时间差或设固定 delay。让浏览器决定何时渲染下一帧：
- 在
raf回调中统一更新所有弹幕的left坐标（基于经过时间 Δt 和预设速度） - 只在需要时才触发样式变更（如新增/移除元素），避免每帧都操作 DOM
- 用
performance.now()记录上一帧时间戳，精确计算 Δt，防止丢帧导致跳跃
二、DOM 元素复用 + CSS transform 位移，禁用 left/top 动画
频繁修改 left 或 top 会触发 Layout（重排），严重拖慢性能。正确做法是：
- 预先创建一个弹幕池（例如 200 个
<div class="danmaku">），全部添加到容器中但设为 <code>visibility: hidden或display: none - 启用时从池中取一个，设置内容、颜色、字体大小等静态样式（仅一次），再用
transform: translateX(...)移动 - 离开视口后不
remove()，而是reset()并放回池中等待复用 - 给弹幕外层容器加
style="transform: translateZ(0); will-change: transform;" - 确保弹幕元素本身不触发 Paint（比如避免透明度渐变、阴影、border-radius 动画）
- 使用
contain: layout paint style（可选）进一步隔离渲染影响范围 - 维护一个活动弹幕列表，只对当前在视口内或即将进入的弹幕做位置更新
- 用
getBoundingClientRect()快速判断是否已完全移出右边界（left > containerWidth），立即回收 - 对超高频弹幕流（如每秒 50+ 条），可动态降帧（跳过部分帧更新）或合并同类样式批次渲染
三、分层渲染 + will-change 提示合成器
把弹幕容器单独提升为合成层，让其交由 GPU 渲染：
立即学习“前端免费学习笔记（深入）”；
四、按需调度 + 可见性裁剪，降低无效计算
不是所有弹幕都需要参与每帧更新：
不复杂但容易忽略：关键不在“怎么动”，而在“不动什么”——少改 DOM、少触布局、少占主线程。只要复用 + transform + raf + 分层四点到位，即使上千条弹幕也能稳跑 60fps。
