弹幕点赞需JavaScript驱动，HTML仅提供结构、CSS控制样式；须用requestAnimationFrame实现平滑滚动，localStorage持久化需带上下文标识与时间戳，真实项目必须对接后端接口并做幂等校验。
弹幕点赞不是 HTML 原生能力，得靠 JavaScript 驱动
HTML 本身没有 <danmaku> 或 like 属性，所谓“HTML 弹幕点赞”其实是用 HTML 搭结构、CSS 控制样式、JavaScript 实现逻辑。浏览器不识别“弹幕”这个语义，所有滚动、碰撞检测、点赞计数、实时同步都得手动写或借力库。
常见错误是把 <div class="danmu"> 往页面一扔就以为能动——它只是个静止盒子，没 JS 就不会飞也不会响应点击。
- 弹幕容器必须设
position: relative，每条弹幕用position: absolute或position: fixed+ 动态top/left控制起点 - 点赞按钮不能用
<button>默认样式硬塞进弹幕 DOM——它会破坏行高和定位，推荐用<span class="like-btn">+display: inline-block+ 背景图或 SVG - 每次点击要立刻更新该条弹幕的
data-liked状态，并累加其data-count，否则二次点击无法反向取消
用 requestAnimationFrame 实现平滑弹幕滚动，别用 setInterval
弹幕横向滚动若用 setInterval + style.left 修改，容易卡顿、不同步、丢帧。浏览器渲染节奏和 JS 执行节奏不一致，尤其在后台标签页或低端设备上，setInterval 还会继续跑但画面不动，切回来时所有弹幕挤成一团。
正确做法是用 requestAnimationFrame 驱动每一帧位移：
立即学习“前端免费学习笔记（深入）”；
function animateDanmu() {
danmus.forEach(d => {
const current = parseFloat(d.style.left) || 0;
d.style.left = (current - 2) + 'px';
if (current < -d.offsetWidth) {
d.remove(); // 滚出视口就删掉，防内存堆积
}
});
requestAnimationFrame(animateDanmu);
}
requestAnimationFrame(animateDanmu);- 位移量（如
-2）不是固定像素值，应根据弹幕生成时间戳和当前时间差做匀速计算，避免快慢不一 - 务必检查
d.offsetWidth是否已渲染完成——新插入的弹幕可能offsetWidth === 0，需等offsetParent存在或用getBoundingClientRect() - 不要给每条弹幕单独启一个
requestAnimationFrame，统一调度，否则几百条弹幕会触发几百次帧回调，直接卡死
点赞状态本地缓存用 localStorage，但得带时间戳防过期
用户点一次赞，刷新页面后还显示已点，这需要持久化。但直接存 localStorage.setItem('liked_123', 'true') 有隐患：如果同一条弹幕 ID 在不同场次重复出现（比如回放），旧记录会误判为已点。
- 键名必须包含上下文标识，例如
liked_${videoId}_${danmuId}，而不是只用danmuId - 值不应只是布尔，推荐存对象：
{ liked: true, ts: Date.now() }，后续可按时间清理 24 小时前的记录 - 点赞时先读取再判断：
const cache = JSON.parse(localStorage.getItem(key) || '{}');，避免null导致报错 - 注意 Safari 无痕模式下
localStorage会抛QuotaExceededError，需 try/catch 包裹
真实项目里，弹幕点赞几乎都要对接后端接口
纯前端点赞只能改本地 UI 和缓存，别人看不到，也不计入统计。真正上线必须调用类似 /api/danmu/like 的接口，且要处理失败重试、防重复提交、服务端幂等校验。
- 点击后立即 UI 反馈（如爱心变红、数字+1），但接口返回成功后再持久化到
localStorage，失败则还原 UI 并提示“点赞失败，请重试” - 请求头带上
X-Request-ID或生成唯一client_id，服务端据此拒绝 5 秒内重复 ID 的点赞请求 - 别在弹幕 DOM 上直接写
onclick="like(this)"—— 不利于测试、无法传参、难维护；用事件委托绑定到容器：danmuContainer.addEventListener('click', e => { if (e.target.matches('.like-btn')) { handleLike(e.target.dataset.id); } });
弹幕点赞看着轻量，但滚动性能、状态同步、异常兜底、服务端一致性，每个环节漏一点，上线后就是抖动、重复计数、点赞消失、用户投诉。最易被忽略的是：没做弹幕元素卸载清理，跑十几分钟内存涨到 500MB，然后用户关掉标签页都卡顿。
