移动端 Canvas 性能优化有哪些关键策略？

移动端 Canvas 的核心性能瓶颈

移动端 Canvas 渲染面临三大核心瓶颈：GPU 算力受限、内存带宽紧张、主线程易阻塞。理解这三个瓶颈，是制定优化策略的前提。

GPU 算力受限意味着同一帧内能完成的像素填充量有限。中低端设备的 GPU 填充率可能只有高端设备的 1/3 到 1/5，一个在 iPhone 15 上流畅的粒子效果，在 Redmi Note 上可能直接掉到 20fps 以下。

内存带宽紧张则影响纹理采样和帧缓冲读写。Canvas 的每一次 drawImage 和渐变填充都需要从显存读取纹理数据，当画面元素过多时，带宽成为瓶颈，表现为帧率随元素数量线性下降。

主线程易阻塞是因为 Canvas 2D 的所有绘制调用都在主线程执行。一旦某帧绘制耗时超过 16ms，就会掉帧，而移动端 CPU 单核性能弱，更容易触碰这个上限。

绘制优化：减少 GPU 工作量

脏矩形重绘

不要每帧清空并重绘整个 Canvas，只重绘发生变化（脏）的区域：

javascript
// 记录脏区域
const dirtyRect = { x: 0, y: 0, w: 0, h: 0 };

function markDirty(x, y, w, h) {
  // 合并脏区域（简化实现：取并集矩形）
  if (dirtyRect.w === 0) {
    dirtyRect.x = x; dirtyRect.y = y;
    dirtyRect.w = w; dirtyRect.h = h;
  } else {
    const x1 = Math.min(dirtyRect.x, x);
    const y1 = Math.min(dirtyRect.y, y);
    const x2 = Math.max(dirtyRect.x + dirtyRect.w, x + w);
    const y2 = Math.max(dirtyRect.y + dirtyRect.h, y + h);
    dirtyRect.x = x1; dirtyRect.y = y1;
    dirtyRect.w = x2 - x1; dirtyRect.h = y2 - y1;
  }
}

function render() {
  if (dirtyRect.w > 0) {
    ctx.save();
    ctx.beginPath();
    ctx.rect(dirtyRect.x, dirtyRect.y, dirtyRect.w, dirtyRect.h);
    ctx.clip();
    ctx.clearRect(dirtyRect.x, dirtyRect.y, dirtyRect.w, dirtyRect.h);
    // 仅重绘脏区域内的元素
    drawDirtyElements(dirtyRect);
    ctx.restore();
    dirtyRect.w = 0; dirtyRect.h = 0;
  }
  requestAnimationFrame(render);
}

脏矩形在元素少、变化局部时效果显著，可将重绘面积减少 80% 以上。但当脏区域分散或全屏都在变化时（如全屏粒子），效果有限，此时应考虑分层策略。

离屏 Canvas 缓存

将不频繁变化的静态内容预渲染到离屏 Canvas，主循环只需 drawImage 一次即可完成绘制：

javascript
const offscreen = document.createElement('canvas');
const offCtx = offscreen.getContext('2d');
// 初始化时渲染静态内容
function initStaticLayer() {
  offscreen.width = canvas.width;
  offscreen.height = canvas.height;
  drawBackground(offCtx);
  drawStaticUI(offCtx);
}

// 主渲染循环
function render() {
  ctx.drawImage(offscreen, 0, 0); // 一次调用替代数百次绘制
  drawDynamicElements(ctx);
  requestAnimationFrame(render);
}

关键点：离屏 Canvas 的尺寸不要超过实际需要，因为显存占用 = width × height × 4 bytes。一张 1080×1920 的离屏 Canvas 就占约 8MB 显存。

批量绘制与路径合并

减少状态切换和绘制调用次数。每次改变 fillStyle、strokeStyle、font 等属性都会触发 GPU 管线状态变更，这在移动端开销很大：

javascript
// 不推荐：频繁切换样式
particles.forEach(p => {
  ctx.fillStyle = p.color;  // 每次切换 fillStyle
  ctx.fillRect(p.x, p.y, p.size, p.size);
});

// 推荐：按颜色分组，减少状态切换
const grouped = groupBy(particles, 'color');
Object.entries(grouped).forEach(([color, items]) => {
  ctx.fillStyle = color;  // 每种颜色只设置一次
  ctx.beginPath();
  items.forEach(p => {
    ctx.rect(p.x, p.y, p.size, p.size);
  });
  ctx.fill();
});

分层渲染：用合成代替重绘

浏览器渲染管线中，合成（compositing）由 GPU 完成，代价远低于 Canvas 重绘。利用这一机制，将画面拆分到多个 Canvas 层，静态层不重绘，只有动态层更新：

javascript
// 创建分层 Canvas
const bgLayer = createLayer('bg');   // 静态背景层
const mainLayer = createLayer('main'); // 主交互层
const fxLayer = createLayer('fx');   // 特效层

// 静态层只渲染一次
renderBackground(bgLayer.ctx);

// 动态层每帧更新
function render() {
  clearLayer(mainLayer);
  drawPlayer(mainLayer.ctx);
  drawEnemies(mainLayer.ctx);

  clearLayer(fxLayer);
  drawParticles(fxLayer.ctx);

  requestAnimationFrame(render);
}

分层时用 CSS position: absolute 叠放，每层独立 CSS 合成。注意层数不要超过 3-4 层，因为每增加一层都多一份显存开销和合成成本。

设备像素比适配

高 DPI 屏幕是移动端 Canvas 性能的重灾区。一块 3 倍屏（devicePixelRatio = 3）意味着同样逻辑尺寸的 Canvas 实际像素数是 1 倍屏的 9 倍：

javascript
const dpr = window.devicePixelRatio || 1;

// 方案一：完整适配（画质最优，性能消耗大）
canvas.width = logicalWidth * dpr;
canvas.height = logicalHeight * dpr;
canvas.style.width = logicalWidth + 'px';
canvas.style.height = logicalHeight + 'px';
ctx.scale(dpr, dpr);

// 方案二：降采样适配（平衡画质与性能）
const renderDpr = Math.min(dpr, 2); // 上限 2 倍
canvas.width = logicalWidth * renderDpr;
canvas.height = logicalHeight * renderDpr;
canvas.style.width = logicalWidth + 'px';
canvas.style.height = logicalHeight + 'px';
ctx.scale(renderDpr, renderDpr);

面试要点：3 倍屏上用完整适配，Canvas 显存占用是 1 倍屏的 9 倍。对于性能敏感场景（游戏、复杂动画），建议将渲染分辨率限制在 2 倍 DPR，视觉差异在移动端屏幕上几乎不可感知。

内存管理

对象池

Canvas 应用中频繁创建和销毁对象（子弹、粒子、动画精灵）会触发 GC，导致帧率卡顿。对象池通过复用对象来规避：

javascript
class ObjectPool {
  constructor(factory, initialSize = 50) {
    this.factory = factory;
    this.pool = [];
    for (let i = 0; i < initialSize; i++) {
      this.pool.push(factory());
    }
  }

  acquire() {
    return this.pool.length > 0
      ? this.pool.pop()
      : this.factory();
  }

  release(obj) {
    obj.reset?.();
    this.pool.push(obj);
  }
}

// 使用示例
const bulletPool = new ObjectPool(() => new Bullet(), 100);

function fireBullet() {
  const bullet = bulletPool.acquire();
  bullet.init(player.x, player.y, player.angle);
  activeBullets.push(bullet);
}

function removeBullet(bullet) {
  bulletPool.release(bullet);
  activeBullets.splice(activeBullets.indexOf(bullet), 1);
}

资源释放

Canvas 和 Image 对象不会自动释放，必须手动处理：

javascript
function releaseCanvas(target) {
  target.width = 0;
  target.height = 0;
}

function releaseImage(img) {
  img.src = '';
  img.onload = null;
  img.onerror = null;
}

将 Canvas 尺寸设为 0 可以立即释放其关联的 GPU 缓冲区，这是最可靠的释放方式。

主线程卸载：Web Workers + OffscreenCanvas

Canvas 2D 绘制本身无法移到 Worker 中执行，但计算密集型任务可以：

javascript
// 主线程
const worker = new Worker('physics-worker.js');
worker.onmessage = (e) => {
  const { positions } = e.data;
  renderFrame(positions);
  requestAnimationFrame(tick);
};

function tick() {
  worker.postMessage({ type: 'update', deltaTime: lastDelta });
}

// Worker 线程 (physics-worker.js)
self.onmessage = (e) => {
  if (e.data.type === 'update') {
    const positions = updatePhysics(e.data.deltaTime);
    self.postMessage({ positions });
  }
};

在支持 OffscreenCanvas 的浏览器中（Chrome、Firefox 已支持，Safari 17+ 支持），可以直接在 Worker 中完成绘制：

javascript
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ type: 'init', canvas: offscreen }, [offscreen]);

// Worker 中直接绘制
self.onmessage = (e) => {
  if (e.data.type === 'init') {
    const ctx = e.data.canvas.getContext('2d');
    // 完全在 Worker 中完成绘制，主线程零开销
  }
};

注意：Worker 和主线程之间的数据传输采用结构化克隆，大量数据传输本身有开销。对于共享内存场景，可使用 SharedArrayBuffer。

触摸事件优化

移动端触摸事件处理不当会显著影响渲染性能：

javascript
// 1. 使用 passive 监听器避免阻塞浏览器滚动合成
canvas.addEventListener('touchmove', onTouchMove, { passive: true });

// 2. 节流触摸事件处理
let lastTouchTime = 0;
const TOUCH_SAMPLE_INTERVAL = 16; // 约 60fps

function onTouchMove(e) {
  const now = performance.now();
  if (now - lastTouchTime < TOUCH_SAMPLE_INTERVAL) return;
  lastTouchTime = now;

  const touch = e.touches[0];
  processTouch(touch.clientX, touch.clientY);
}

// 3. 阻止默认行为时才取消 passive
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault(); // 阻止滚动/缩放
}, { passive: false });

passive: true 让浏览器不必等待事件处理函数执行完就可以开始滚动合成，这对移动端触摸响应至关重要。

降级与自适应策略

针对不同性能水平的设备，应采用分级渲染策略：

javascript
function detectPerformanceLevel() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 256;
  canvas.height = 256;

  const start = performance.now();
  for (let i = 0; i < 1000; i++) {
    ctx.fillStyle = `hsl(${i % 360}, 50%, 50%)`;
    ctx.fillRect(0, 0, 256, 256);
  }
  const elapsed = performance.now() - start;

  // 根据绘制耗时分级
  if (elapsed < 10) return 'high';
  if (elapsed < 30) return 'medium';
  return 'low';
}

const level = detectPerformanceLevel();
const config = {
  high:   { maxParticles: 200, dpr: Math.min(devicePixelRatio, 3), shadows: true },
  medium: { maxParticles: 100, dpr: Math.min(devicePixelRatio, 2), shadows: false },
  low:    { maxParticles: 50,  dpr: 1, shadows: false },
}[level];

高开销操作避坑

以下操作在移动端的开销远超桌面端，需要特别注意：

操作	开销原因	替代方案
shadowBlur / shadowColor	每次绘制触发额外高斯模糊 pass	用预渲染的阴影图片代替
getImageData() / putImageData()	CPU-GPU 数据往返，同步阻塞	减少调用频率，或用 WebGL readPixels
浮点坐标	触发亚像素抗锯齿，增加 4 倍填充量	Math.floor() 或 `
ctx.filter	实时滤镜计算量大	预渲染滤镜效果到离屏 Canvas
频繁 save()/restore()	状态栈操作开销	手动管理状态，减少调用次数

其中 浮点坐标 是最容易被忽视的性能杀手。一个坐标从 10 变成 10.5，Canvas 引擎就需要对周围像素做抗锯齿混合，实际填充像素数可能增加 4 倍。在高频调用的绘制循环中，务必对所有坐标取整。

面试追问方向

Q: 脏矩形在什么场景下失效？ 全屏粒子、大量分散的动态元素、背景持续变化等场景下，脏区域几乎覆盖全屏，局部重绘失去意义，应转用分层策略。

Q: 离屏 Canvas 和 CSS 分层各适合什么场景？ 离屏 Canvas 适合在同一个 Canvas 内需要多次复用的静态图形；CSS 分层适合不同更新频率的内容（如背景层和交互层），让浏览器合成器处理层间叠加。

Q: 如何量化判断一个 Canvas 应用是否需要优化？ 核心指标：帧率是否稳定在 60fps（每帧 ≤16ms）、是否存在帧时间毛刺（可用 performance.now() 逐帧打点）、GPU 内存占用是否可控（单 Canvas 建议 ≤20MB）、是否存在频繁 GC 暂停。