弹幕池应使用 div + scrollIntoView 实现，避免 marquee 标签；其本质是可追加、清理、限流的 DOM 队列，需设 overflow: hidden 和固定高度，插入后立即调用 scrollIntoView。
弹幕池列表用 div + scrollIntoView 最稳，别碰 marquee
原生 marquee 标签早已被现代浏览器降权，Chrome 会静默禁用、Safari 不触发重绘、Firefox 对其 CSS 动画支持断裂，且无法监听滚动位置或控制单条弹幕生命周期。真实项目里，弹幕池本质是「可追加、可清理、可限流的 DOM 队列」，核心靠 div 容器 + scrollIntoView({ block: 'nearest', behavior: 'smooth' }) 或更轻量的 scrollTop 手动偏移实现。
常见错误现象：marquee 在手机端卡顿、弹幕重叠、无法暂停/清屏、时间轴错乱；用 transform: translateX() 做动画时，大量弹幕导致 FPS 掉到 10 以下。
- 弹幕容器必须设
overflow: hidden和固定高度，否则scrollIntoView失效 - 每条弹幕
div插入后立即调用element.scrollIntoView()，不依赖定时器轮询 - 用
getBoundingClientRect().top 判断是否已划出视口，触发 <code>remove()，避免 DOM 泄漏 - 限制池内最大数量（如 150 条），超出则
container.firstChild.remove()，别等内存爆掉
如何用 JavaScript 控制弹幕实时入池和自动销毁
关键不在“怎么显示”，而在“谁来决定哪条该进、哪条该删”。真实弹幕池必须有状态管理：每条弹幕带 id、timestamp、life（毫秒存活期）、speed（像素/帧）。
使用场景：直播评论同步、考试答题实时反馈、大屏数据刷榜。不能所有弹幕一股脑塞进去，得按业务规则过滤（如屏蔽词、重复 ID、低质量内容）。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 入池前先做去重：
if (pool.some(item => item.content === newMsg.content && Date.now() - item.timestamp - 用
requestAnimationFrame驱动位移，比setInterval更准，且页面切后台时自动暂停 - 销毁逻辑必须绑定在
animationend或帧循环检测中，不能只靠 CSSanimation-delay猜时间 - 移动端需加
touch-action: none到容器，防止滑动冲突
position: absolute 弹幕层和 fixed 弹幕层的区别与选型
两种方案都绕不开层叠上下文（stacking context）。绝对定位适合嵌入现有页面流（比如评论区下方叠加一层），fixed 更适合全屏覆盖式弹幕（如 B 站视频播放器）。
性能影响明显：fixed 层在 iOS Safari 下容易触发频繁重排，尤其配合 transform 动画时；absolute 层若父容器 transform 值非 none，会导致定位基准偏移——这是最常被忽略的坑。
- 用
absolute时，确保最近的非static父级是弹幕容器本身，别意外继承了外层transform: scale(0.95) - 用
fixed时，必须手动监听window.resize重算容器尺寸，否则弹幕飞出屏幕 - 两者都建议加
will-change: transform到弹幕元素，但仅对活跃弹幕加，别全局写死 - 颜色/字体必须用内联
style设置，CSS class 注入太慢，首条弹幕常白屏 100ms+
为什么 JSON 弹幕源要预解析，不能边收边渲染
后端推来的弹幕流（WebSocket 或 SSE）通常是数组包，比如 [{"id":"a1","txt":"666","color":"#ff4757"}]。如果每来一条就 document.createElement('div') + innerHTML，V8 会高频触发 GC，Android 中低端机直接卡顿。
正确做法是：收到整包后，先用 JSON.parse() 转对象，再批量校验字段（txt 长度、color 是否合法十六进制）、过滤敏感词、合并同用户连发（防刷），最后一次性 fragment.appendChild() 插入。
- 避免在循环里反复读取
container.scrollHeight，它强制触发回流，改用container.children.length * 32估算高度 - 弹幕文本含 emoji 时，用
textContent而非innerHTML，防 XSS，且渲染更快 - 服务端应提供
ts字段（毫秒时间戳），前端据此计算相对延迟，而不是用Date.now()直接塞，否则 NTP 时间偏差导致弹幕乱序
实际跑起来你会发现：最难的不是让字动起来，而是让 200 条弹幕在低端安卓机上不丢帧、不卡顿、不错位，同时还能随时按关键词暂停、拖拽调整速度、导出当前池快照——这些能力全靠池子本身的结构设计，跟动画怎么写关系不大。
