17370845950

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);
}
/ ✅ 高效写法：分组绘制，状态只切两次 /
ctx.fillStyle = 'red';
for (let i = 0; i < 50; i++) {
ctx.fillRect(i  20, 0, 8, 20);
}
ctx.fillStyle = 'blue';
for (let i = 0; i < 50; i++) {
ctx.fillRect(i  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 位像素
// 例如：快速填充某区域为红色
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 以上。