Canvas设计性能优化实战：从卡顿到流畅的解决方案

1次阅读

共计 2220 个字符，预计需要花费 6 分钟才能阅读完成。

在开发复杂 Canvas 应用时，性能问题往往是开发者最大的痛点。根据实测数据，当画布中元素数量超过 5000 个时，主流设备的帧率会急剧下降至 20FPS 以下，用户体验明显变差。特别是在移动端，这种性能问题更加突出。

主 Canvas+ 缓冲层架构
将渲染任务分配到多个 Canvas 层，每层负责不同类型的元素
静态背景层：不频繁更新的内容
动态元素层：需要频繁重绘的对象
交互层：处理用户交互元素
实现原理
通过 CSS 绝对定位叠加多个 Canvas
仅重绘需要更新的层级，减少不必要的 repaint
使用 z -index 控制层级显示顺序

离屏 Canvas(Offscreen Canvas) 是性能优化的利器，主要有三种使用场景：

静态背景预渲染
对于不变化的背景元素，预先渲染到离屏 Canvas
主循环中直接 drawImage 调用，避免重复绘制
复杂图形缓存
将复杂路径绘制结果缓存到离屏 Canvas
特别适用于 SVG 路径等复杂图形的渲染
动画帧预渲染
对序列帧动画预先渲染到多个离屏 Canvas
实现代码如下：

// 离屏 Canvas 预渲染示例
const preRenderFrames = (frames: string[]) => {const offscreenCanvases: HTMLCanvasElement[] = [];

  frames.forEach((frame, index) => {const offscreen = document.createElement('canvas');
    const ctx = offscreen.getContext('2d');

    // 设置离屏 Canvas 尺寸
    offscreen.width = 1024;
    offscreen.height = 768;

    // 预渲染逻辑
    renderFrame(ctx, frame);

    offscreenCanvases[index] = offscreen;
  });

  return offscreenCanvases;
};

// 使用预渲染的帧
const renderCurrentFrame = (ctx: CanvasRenderingContext2D, frameIndex: number) => {ctx.drawImage(offscreenCanvases[frameIndex], 0, 0);
};

requestAnimationFrame 优化
使用 rAF 替代 setTimeout/setInterval
实现帧率控制的代码示例：

let lastTime = 0;
const targetFPS = 60;
const frameInterval = 1000 / targetFPS;

const gameLoop = (timestamp: number) => {
  // 性能测量开始
  performance.mark('frame-start');

  const deltaTime = timestamp - lastTime;

  if (deltaTime >= frameInterval) {
    // 执行渲染逻辑
    renderScene();

    lastTime = timestamp - (deltaTime % frameInterval);
  }

  // 性能测量结束
  performance.mark('frame-end');
  performance.measure('frame-duration', 'frame-start', 'frame-end');

  requestAnimationFrame(gameLoop);
};

requestAnimationFrame(gameLoop);

性能对比工具
使用 console.time 和 performance API 进行精确测量
示例性能对比函数：

const benchmark = () => {
  // 传统渲染方式
  console.time('direct-render');
  renderDirectly();
  console.timeEnd('direct-render');

  // 离屏 Canvas 渲染
  console.time('offscreen-render');
  renderWithOffscreen();
  console.timeEnd('offscreen-render');
};