Canvas 还是 CSS：背景特效的引擎怎么选

问题背后的问题

“哪个更快”是错误的问题——模糊的 CSS 光球和 300 粒子的画布在笔记本上都是 60fps，在 2019 年的中端手机上都会卡。正确的问题是：你的效果需要“做什么”？交互和物理把你推向 Canvas；氛围漂移把你推向 CSS。

这些情况选 CSS…

• 动效是氛围型的——漂移光球、跑马灯、变形 blob：即使主线程繁忙，合成器也会在 GPU 上跑它们。
• 你想要零 JavaScript——纯 CSS 动画在水合失败、广告拦截、框架重渲染下都照常工作。
• 效果要适配任意视口——vmin 单位和百分比比 canvas 的 resize 计算省心。

这些情况选 Canvas…

• 元素之间有交互——鼠标引力、碰撞、邻接连线。纯合成的 CSS 算不了“关系”。
• 你需要物理——重力、阻力、弹簧。Canvas 给你帧循环；CSS 只给你缓动曲线。
• 粒子数超过约 50——每粒子一个 DOM 节点会拖垮布局；一块画布重绘几千个都很便宜。

没人提的成本曲线

CSS blur 是隐藏成本：filter: blur(80px) 会撑出巨大的合成层，四个叠起来可能比一块小 canvas 还贵。而 300 粒子的画布本来毫无压力——直到有人切走标签页：你没暂停的 rAF 循环会以 60fps 继续烧电池；CSS 动画同样永远在跑，但合成器在标签页隐藏时会跳帧。

实操规则：在 visibilitychange 里暂停 canvas 循环；移动端砍半粒子数（window.innerWidth < 768）；一个模糊光球好过三个。

混合答案

最高级的页面两者都用：纯 CSS 极光打底（免费、常驻）+ 一个 Canvas 招牌瞬间（首次交互才启动）。打底的永远不占主线程帧；canvas 只在它当主角时运行。