Canvas和CSS动画无绝对优劣，关键看应用场景：CSS适合轻量滚动、SEO需求及简单样式，Canvas适合高交互、复杂效果及超大数量弹幕；二者常混合使用。
Canvas 和 CSS 动画在渲染性能上没有绝对优劣，关键看用在哪、怎么用。它们底层机制不同，导致在不同设备、不同密度、不同交互需求下表现差异明显。
硬件加速支持程度不同
CSS 动画依赖浏览器对 transform 和 opacity 的原生硬件加速，只要不触发 layout（回流），大多数现代桌面浏览器（Chrome、Firefox、Safari）都能高效跑满 60fps。Canvas 本身不自动启用 GPU 加速——是否加速取决于绘图操作类型和浏览器实现：简单 drawImage 或 fillRect 可能走 GPU，但频繁调用 save/restore、复杂路径绘制或大量文本测量（如 measureText）会退回到 CPU 渲染，拖慢帧率。
- 桌面 Chrome：CSS 动画通常更稳，Canvas 在高负载下易掉帧
- 移动端 Safari / Android WebView：Canvas 绘制控制更直接，避免 DOM 批量更新带来的卡顿，实际更流畅
- Firefox：CSS 动画普遍比 Canvas 快，尤其在弹幕类滚动场景中优势明显
内存与 CPU 开销逻辑相反
CSS 动画每个弹幕都是一个 DOM 元素，1000 条弹幕 ≈ 1000 个节点 + 样式计算 + 布局影响；Canvas 把所有弹幕画在单个画布上，DOM 节点极少，但 JS 需每帧遍历、计算位置、调用绘图 API —— CPU 负担集中在 JS 线程，而 CSS 动画把压力分摊到渲染线程。
- DOM 多 → 内存占用高、重排风险大、GC 压力上升
- Canvas 多 → JS 计算密集、
requestAnimationFrame逻辑需精细优化，否则容易超 16.67ms - 典型瓶颈：CSS 方案卡在“样式计算+布局”，Canvas 方案卡在“JS 执行+绘制提交”
适用场景有明确分界
不是“哪个更快”，而是“哪个更适合当前任务”。比如 DPlayer 默认用 CSS 渲染弹幕，但用 Canvas 测量文本宽度——两者常混合使用。
立即学习“前端免费学习笔记（深入）”；
- 选 CSS：轻量滚动、固定样式、需 SEO 或可访问性（
aria-label）、要响应伪类（:hover） - 选 Canvas：弹幕碰撞检测、路径变形、粒子效果、逐帧动画控制（暂停/变速/倒放）、超大数量（3000+）且滚动方向不固定
- 慎用 Canvas：纯文字滚动且样式简单——反而增加 JS 开销，不如 CSS 的
animation声明式简洁
调试与维护成本差异大
CSS 动画可以直接用 DevTools 查看动画时间轴、修改关键帧、禁用某条规则即时生效；Canvas 动画必须打断点、查坐标、看帧时间戳，调试链路长，出问题难定位。
- CSS：改一行
animation-duration就能看到效果，适合快速迭代 - Canvas：调整速度可能涉及时间差计算、插值算法、清除策略，改错一点整屏乱序
- 真实项目中，80% 的弹幕场景用 CSS 足够，剩下 20% 高交互需求才值得切 Canvas
