← 返回首页

Canvas 高性能渲染实践与内存优化

2026-04-24 · 前端工程化 · 阅读时长 12 分钟

Canvas 适合高密度渲染场景，但它并不天然高性能。真正拉开差距的是渲染策略：是否避免全量重绘、是否控制对象分配、是否把重计算移出主线程。

先做性能预算

60fps 对应每帧 16.7ms。建议把业务脚本压到 6~8ms，其余预算留给浏览器绘制和输入响应。先定位瓶颈，再做优化，不要靠猜。

分层渲染与脏矩形

静态背景单独缓存，动态对象只绘制脏区域，通常是最稳妥的第一步。

const dirty = [];
function mark(x, y, w, h) { dirty.push({ x, y, w, h }); }
function draw(ctx) {
  for (const r of dirty) {
    ctx.clearRect(r.x, r.y, r.w, r.h);
    renderDynamic(ctx, r);
  }
  dirty.length = 0;
}

内存复用

getImageData 频繁调用会带来明显拷贝成本。尽量复用数组与中间缓冲区，减少热点路径创建临时对象。