<canvas> 性能优于 HTML/CSS 的原因主要涉及以下几点：
1. 低级别绘图操作
- 直接绘图：
<canvas>允许直接进行像素级别的绘图操作。它通过 JavaScript 提供了一个可以直接操作像素的 API，这使得绘制复杂图形和动画的性能更高，因为可以避开 DOM 和 CSS 渲染的开销。
2. 无 DOM 更新开销
- 无需 DOM 操作：使用
<canvas>绘制图形时，不涉及 DOM 的增删改操作，而这些操作通常会引发重排（reflow）和重绘（repaint）。这些操作是性能开销较大的，特别是在复杂的布局和样式计算中。
3. 高效的渲染路径
- 批量渲染：
<canvas>允许通过一次绘制命令批量渲染多个图形，这与 HTML/CSS 的逐个渲染不同。Canvas 的绘图操作是批处理的，可以减少浏览器的渲染次数。
4. GPU 加速
- 硬件加速：现代浏览器通常对
<canvas>渲染进行硬件加速，利用 GPU 处理图形渲染，从而大幅提升性能。相比之下，HTML/CSS 渲染通常依赖于 CPU 计算，尽管一些 CSS 渲染也可能得到 GPU 加速，但整体上可能不如<canvas>效率高。
5. 精确控制渲染
- 像素级控制：
<canvas>允许开发者精确控制每个像素的绘制方式。这种精细的控制使得开发者可以实现各种复杂的图形效果，而不必担心被 DOM 和 CSS 布局的限制。
6. 动画性能
- 平滑动画：由于
<canvas>绘制的每一帧都是独立的，因此在进行动画时，它可以保持较高的帧率，特别是在进行大量绘制操作时。这种高效的帧率通常比使用 CSS 动画或 JavaScript 操作 DOM 更容易实现流畅的动画效果。