Canvas结合requestAnimationFrame高CPU占用问题求助及优化咨询

嘿，我太懂你被这个CPU占用问题折腾的感受了——从80%压到40%-50%已经是不小的进步，但显然还有优化空间。结合requestAnimationFrame的特性和Canvas的性能痛点，我整理了几个实用的优化方向，你可以挨个尝试：

1. 主动控制渲染帧率 #

requestAnimationFrame默认跟着显示器刷新率跑（通常60fps），但很多动画场景完全不需要这么高的帧率，30fps就足够流畅。你可以给渲染逻辑加个节流，比如每2帧才执行一次绘制：

let frameCount = 0;
function animate() {
  frameCount++;
  // 每2帧渲染一次，直接砍半渲染压力
  if (frameCount % 2 === 0) {
    render(); // 你的Canvas绘制逻辑
  }
  requestAnimationFrame(animate);
}

如果是对流畅度要求更低的场景，甚至可以改成每3帧渲染一次（20fps），CPU占用会进一步下降。

2. 只重绘需要更新的区域 #

别每次渲染都用ctx.clearRect(0, 0, canvas.width, canvas.height)清空整个画布！只清除和重绘实际变化的区域：

// 假设之前记录了元素的旧位置oldX、oldY，以及元素宽高w、h
function render(newX, newY) {
  // 清除元素原来的位置（多留1px避免边缘残留）
  ctx.clearRect(oldX - 1, oldY - 1, w + 2, h + 2);
  // 绘制元素新位置
  ctx.drawImage(sprite, newX, newY, w, h);
  // 更新旧位置记录
  oldX = newX;
  oldY = newY;
}

这种局部重绘的方式，在画布尺寸较大时，性能提升非常明显。

3. 复用绘制对象，避免重复创建 #

不要在渲染循环里反复创建Path2D、Image、Gradient这类对象，提前初始化好复用：

// 提前创建好路径，不要在animate里重复生成
const circlePath = new Path2D();
circlePath.arc(50, 50, 30, 0, Math.PI * 2);

// 提前加载好图片，避免每次渲染都重新加载
const spriteImg = new Image();
spriteImg.src = './sprite.png';

function render() {
  ctx.fill(circlePath); // 直接复用已有路径
  ctx.drawImage(spriteImg, 100, 100); // 复用已加载的图片
}

频繁创建对象会触发垃圾回收，间接拉高CPU占用。

4. 把静态计算移出渲染循环 #

把那些固定不变的计算（比如画布中心坐标、固定颜色值）提到循环外面，只在必要时更新：

// 不好的写法：每次渲染都重复计算
function render() {
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  ctx.drawImage(logo, centerX - 50, centerY - 50);
}

// 优化写法：只计算一次，画布 resize 时再更新
let logoX, logoY;
function init() {
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  logoX = centerX - 50;
  logoY = centerY - 50;
}
init();
// 监听画布尺寸变化，重新计算
window.addEventListener('resize', init);

function render() {
  ctx.drawImage(logo, logoX, logoY); // 直接使用预计算的值
}

5. 关闭不必要的Canvas特性 #

一些Canvas的视觉特性（比如阴影、透明度）会大幅增加绘制开销，如果你的动画不需要这些，就别开启：

// 不需要阴影的话，注释掉这些代码
// ctx.shadowBlur = 10;
// ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

// 不需要透明度的话，别设置globalAlpha
// ctx.globalAlpha = 0.8;

另外，如果你的代码里经常用到getImageData读取像素，创建Canvas时加上willReadFrequently属性，浏览器会优化内存访问：

<canvas id="myCanvas" willReadFrequently></canvas>

6. 用离屏Canvas预渲染复杂静态内容 #

如果动画里有复杂的静态元素（比如背景、固定装饰），先在离屏Canvas上绘制好，之后每次渲染只把离屏Canvas画到主画布上：

// 创建离屏Canvas并预绘制静态内容
const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;

// 一次性绘制复杂背景
offscreenCtx.fillStyle = '#f0f0f0';
offscreenCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
offscreenCtx.drawImage(complexBackground, 0, 0);

// 主渲染循环里直接复用
function render() {
  // 先画静态背景
  ctx.drawImage(offscreenCanvas, 0, 0);
  // 再绘制动态元素
  ctx.drawImage(sprite, x, y);
}

这样就不用每次渲染都重复绘制那些复杂的静态内容了。

7. 检查内存泄漏和无效循环 #

别忘了检查有没有内存泄漏的情况：比如在渲染循环里不断绑定事件、创建新对象没有回收，或者动画暂停后没有取消requestAnimationFrame的id：

let requestId;
function animate() {
  render();
  requestId = requestAnimationFrame(animate);
}
// 暂停或销毁动画时，一定要取消请求
function stopAnimate() {
  cancelAnimationFrame(requestId);
}

你可以先从控制帧率和局部重绘这两点入手，这两个优化见效最快。如果还是达不到预期，再挨个排查其他点~

内容的提问来源于stack exchange，提问作者user9294038