Canvas性能好因位图渲染省去DOM开销，100万个圆绘制耗时约为SVG的一半；但易变慢因JS驱动频繁状态切换，如每帧clearRect重绘或循环内反复设fillStyle，100次切换可达50ms超帧预算。
Canvas 在高频绘制、动画、游戏、数据可视化等场景下性能远优于 SVG 和 DOM 操作，但前提是正确使用；用错方式时，它反而比直接改 div 还卡。
为什么 Canvas 性能好？又为什么容易变慢？
Canvas 是位图（bitmap）渲染，浏览器不维护图形对象的 DOM 节点，只管“把像素画到哪”——这省掉了大量 DOM 树遍历、样式计算和重排（reflow）开销。100 万个圆，Canvas 绘制耗时通常只有 SVG 的一半左右。
但它的问题也很直接：所有绘制都靠 JavaScript 驱动，一旦你在 requestAnimationFrame 里反复调用 fillRect、strokeText 或频繁切换 ctx.fillStyle，GPU 状态就会被疯狂刷新，帧率立刻掉到 20fps 以下。
- 常见错误现象：
for循环里每画一个矩形就设一次fillStyle，或每帧都clearRect(0,0,w,h)再重绘全部内容 - 性能影响：单次状态切换（如颜色、字体、阴影）可能带来 0.1–0.5ms 开销；100 次就是 50ms，远超 16.67ms 的帧预算
- 兼容性影响：老版本 Safari 对
willReadFrequently: true支持不稳定，慎用于需兼容 iOS 14 以下的项目
如何批量绘制？避免循环内重复设置状态
核心原则：把同类操作聚合成一次调用，状态切换越少越好。
立即学习“前端免费学习笔记（深入）”；
/* ❌ 低效写法：每次循环都改 fillStyle + 绘制 */
for (let i = 0; i < 100; i++) {
ctx.fillStyle = i % 2 ? 'red' : 'blue';
ctx.fillRect(i * 10, 0, 8, 20);
}
<p>/<em> ✅ 高效写法：分组绘制，状态只切两次 </em>/
ctx.fillStyle = 'red';
for (let i = 0; i < 50; i++) {
ctx.fillRect(i <em> 20, 0, 8, 20);
}
ctx.fillStyle = 'blue';
for (let i = 0; i < 50; i++) {
ctx.fillRect(i </em> 20 + 10, 0, 8, 20);
}- 适用场景：绘制网格、图表柱状图、地图瓦片、UI 控件列表
- 参数差异：
beginPath()+ 多个moveTo/lineTo后再stroke()，比逐段strokeRect快 3–5 倍 - 注意：不要为了“看起来整齐”而拆散逻辑——先按状态分组，再按坐标组织
要不要用离屏 Canvas 缓存？什么情况下必须用？
离屏 Canvas（offscreen canvas）不是“锦上添花”，而是应对静态内容+动态叠加的刚需方案。比如 UI 文字标签、背景地图、固定控件，它们几乎不变化，却每帧都被重绘，这是最大浪费。
- 必须缓存的场景：
fillText渲染的标题/说明文字、带阴影的按钮、复杂路径构成的图标 - 缓存时机：只在内容真正改变时（如语言切换、主题变更）重新绘制一次离屏 canvas
- 容易踩的坑：离屏 canvas 的
width/height必须显式设置，不能靠 CSS 缩放；否则drawImage会模糊或拉伸 - 性能影响：缓存后每帧只需一次
drawImage，比原生文本绘制快 5–10 倍（尤其含字体抗锯齿时）
什么时候该放弃 2D API，直接操作像素？
当你在 Canvas 上做图像处理（灰度化、滤镜、粒子系统、体素渲染）、或需要每帧更新数万以上独立像素时，fillRect 或 putImageData 就成了瓶颈。这时应绕过 2D 渲染管线，直写像素缓冲区。
const canvas = document.createElement('canvas');
canvas.width = w; canvas.height = h;
const ctx = canvas.getContext('2d', { willReadFrequently: true });
const imgData = ctx.getImageData(0, 0, w, h);
const pixels = new Uint32Array(imgData.data.buffer); // 直接操作 32 位像素
<p>// 例如：快速填充某区域为红色
for (let i = 0; i < pixels.length; i++) {
pixels[i] = 0xFFFF0000; // ARGB 格式
}
ctx.putImageData(imgData, 0, 0);- 适用场景：实时视频帧处理、噪声图生成、地图热力图、WebGL 前置预处理
- 关键参数：
{ willReadFrequently: true }会禁用 GPU 加速，但换来 CPU 写入像素的确定性速度 - 风险点：频繁调用
getImageData+putImageData本身开销大——务必复用imgData对象，不要每帧新建
Canvas 性能优化不是堆技巧，而是理解“浏览器何时真正开始画像素”。最常被忽略的一点：别在动画主循环里做任何 layout 触发操作，比如读取 ctx.canvas.width、调用 getBoundingClientRect()，哪怕只一次，都可能强制同步回流，瞬间吃掉 5ms 以上。
