Canvas适合高频更新的像素级动画，如游戏和粒子系统，通过requestAnimationFrame实现流畅渲染，并需优化绘制次数与对象数量；SVG基于矢量与DOM，适合可交互、可缩放的结构化图形，支持CSS、SMIL和JavaScript动画，但在节点过多时性能受限；两者选型应根据动画复杂度、交互需求及设备性能权衡，结合离屏缓存、对象池、GPU加速等优化手段提升表现。
在现代前端开发中，实现流畅、高性能的动画效果已成为提升用户体验的重要手段。JavaScript 结合 Canvas 与 SVG 提供了两种主流的图形渲染方式，各自适用于不同的动画场景。理解它们的特点和优化策略，是构建高效动画应用的关键。
Canvas 动画：像素级控制，适合高频更新
Canvas 是基于位图的绘图 API，通过 JavaScript 直接操作像素，适合需要大量动态绘制的场景，如游戏、数据可视化或粒子系统。
实现 Canvas 动画的核心是 requestAnimationFrame，它能与屏幕刷新率同步，确保动画平滑。
- 清空画布后重绘每一帧，避免累积渲染负担
- 减少状态切换，如频繁的 fillStyle 或 stroke 更改
- 对不变元素进行离屏缓存（off-screen canvas）以提升性能
- 控制绘制对象数量，必要时使用对象池复用图形实例
例如，一个简单的移动圆点动画：
立即学习“Java免费学习笔记（深入）”；
const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, 150, 20, 0, Math.PI * 2);
ctx.fill();
x = (x + 5) % canvas.width;
requestAnimationFrame(animate);
}
animate();
SVG 动画：DOM 基于矢量，适合结构化图形
SVG 是一种基于 XML 的矢量图形格式，每个图形元素都是 DOM 节点，适合图标、图表、可交互 UI 等需要缩放不失真或事件绑定的场景。
SVG 动画可通过多种方式实现：
- 使用 CSS transition 或 animation 控制属性变化（如 transform、opacity）
- 通过 SMIL（如
标签），但兼容性有限 - JavaScript 操作 SVG 属性，结合 requestAnimationFrame 实现复杂逻辑
优势在于：清晰的层级结构、易于响应用户交互、无限缩放无失真。但节点过多时，DOM 操作会成为性能瓶颈。
示例：用 JS 改变 circle 的 cx 属性实现移动：
const circle = document.querySelector('#myCircle');let cx = 0;
function moveCircle() {
cx += 4;
if (cx > 500) cx = 0;
circle.setAttribute('cx', cx);
requestAnimationFrame(moveCircle);
}
moveCircle();
性能对比与选型建议
Canvas 更适合成百上千个图形同时运动的场景，因其脱离 DOM，渲染开销低。而 SVG 在图形数量少、需事件处理或样式定制的场景更易维护。
- 动画对象少于 100 且需交互 —— 优先考虑 SVG
- 高频率更新、复杂路径或粒子效果 —— 使用 Canvas
- 需要打印或高清输出 —— SVG 更合适
- 移动端低端设备运行 —— 注意 SVG 的内存占用问题
混合方案也常见：用 SVG 构建静态界面，Canvas 渲染动态层（如实时轨迹）。
通用优化技巧
无论使用哪种技术，以下原则都能提升动画性能：
- 始终使用 requestAnimationFrame 替代 setTimeout/setInterval
- 避免在动画循环中创建新对象或数组
- 节流重排与重绘，合并样式修改
- 利用 will-change 或 transform 来启用 GPU 加速
- 监控 FPS 与内存，及时发现卡顿根源
基本上就这些。掌握 Canvas 与 SVG 的动画机制，并根据实际需求合理选择技术路线，才能在视觉表现与性能之间取得平衡。
