requestAnimationFrame 是实现平滑弹幕滚动的核心，需严格容器定位、逐条独立动画、预设可复用垂直轨道、及时 DOM 回收，避免卡顿、堆叠、偏移与内存泄漏。
requestAnimationFrame 是实现平滑弹幕滚动的核心，不用它而用 setTimeout 或 CSS 动画会卡顿、不同步、难控制生命周期。
弹幕容器必须用 position: relative 包裹 video 和绝对定位层
否则弹幕元素无法精准覆盖在视频画面内，且会受父级 overflow 或 transform 影响偏移或裁剪。
- 外层容器要设
style="position: relative; width: 100%; height: 100%;"，不能依赖 flex 或 grid 布局自动撑高 - 弹幕层（如
#barrageContainer）必须是position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; -
pointer-events: none不可省略——否则鼠标悬停、点击会穿透不到视频控件上
每条弹幕要用 requestAnimationFrame 独立驱动动画
不是给所有弹幕共用一个动画循环，也不是靠 CSS @keyframes 批量控制。因为每条弹幕的起始时间、垂直轨道、速度都不同，必须各自管理生命周期。
- 创建弹幕元素后，立即记录它的
startTime = null，并在第一帧赋值currentTime - 用
progress = (currentTime - startTime) / duration计算横向位置，比直接算像素更抗帧率波动 - 当
progress >= 1时，调用item.remove()清理 DOM，不手动清理会导致内存泄漏 - 别用
setInterval：帧率不稳定时，弹幕会“瞬移”或堆叠；requestAnimationFrame跟浏览器刷新节奏同步
垂直轨道分配要避开重叠，但不能只靠 Math.random()
随机数容易撞车，尤其弹幕密度高时，多条文字挤在同一行，可读性归零。
立即学习“前端免费学习笔记（深入）”；
- 推荐预设 4–6 条固定轨道（比如
[15%, 30%, 45%, 60%, 75%]），每次取一个并轮询使用 - 或维护一个「当前可用轨道」数组，发一条就标记该轨道为忙，动画结束再释放
- 轨道高度要预留文字行高余量，例如
font-size: 16px至少留24px垂直空间，否则上下弹幕视觉粘连 - 避免用
top: Math.random() * (height - lineHeight)——小屏下可能把文字切掉一半
真正难的不是让字动起来，而是让成百条弹幕在不同设备、不同播放进度下都保持节奏一致、不卡、不堆、不漏帧。关键点在于：容器定位必须严格、动画必须逐条独立、轨道必须可复用、DOM 必须及时回收。
