绘制到屏幕前修改内存Canvas致JavaScript性能骤降问题咨询

问题背景 #

我最近在开发Canvas相关效果时遇到了一个棘手的性能问题：当内存中创建大量小型Canvas（比如500个50x50尺寸的），如果每帧先修改这些Canvas的内容，再将它们绘制到主画布上，会导致性能暴跌——哪怕修改操作只是画个小方块，Canvas尺寸也极小。单独修改或者单独绘制这些Canvas时都没有性能问题，但两者同时进行时FPS会骤降。

最简复现案例 #

下面是我编写的最小测试代码，可以完整复现这个问题：

var { canvas, ctx } = generateCanvas(); 
ctx.strokeStyle = "#000"; 
var images = []; 

for (var i = 0; i < 500; i++) { 
  images.push(generateCanvas(50, "red")); 
} 

var fps = 0, lastFps = new Date().getTime(); 
requestAnimationFrame(draw); 

function draw() { 
  requestAnimationFrame(draw); 
  var modRects = document.getElementById("mod-rects").checked; 
  var drawRects = document.getElementById("draw-rects").checked; 

  ctx.clearRect(0, 0, 500, 500); 
  ctx.strokeRect(0, 0, 500, 500); 

  fps++; 
  if (new Date().getTime() - lastFps > 1000) { 
    console.clear(); 
    console.log(fps); 
    fps = 0; 
    lastFps = new Date().getTime(); 
  } 

  images.forEach(img => { 
    img.ctx.fillStyle = "yellow"; 
    if (modRects) img.ctx.fillRect(20, 20, 10, 10); 
    if (drawRects) ctx.drawImage(img.canvas, 225, 225); 
  }); 
} 

function generateCanvas(size = 500, color = "black") { 
  var canvas = document.createElement("canvas"); 
  canvas.width = canvas.height = size; 
  var ctx = canvas.getContext("2d"); 
  ctx.fillStyle = color; 
  ctx.fillRect(0, 0, size, size); 
  return { canvas, ctx }; 
} 

function generateCheckbox(name) { 
  var div = document.createElement("div"); 
  var check = document.createElement("input"); 
  check.type = "checkbox"; 
  check.id = name; 
  var label = document.createElement("label"); 
  label.for = name; 
  label.innerHTML = name; 
  div.appendChild(check); 
  div.appendChild(label); 
  return div; 
} 

document.body.appendChild(canvas); 
document.body.appendChild(generateCheckbox("mod-rects")); 
document.body.appendChild(generateCheckbox("draw-rects")); 

// 基础样式
canvas+div+div { margin-bottom: 20px; }

测试操作说明 #

1. 运行代码后，页面会显示一个主画布和两个复选框：
   • mod-rects：每帧给500个小Canvas各绘制一个黄色小方块
   • draw-rects：每帧把500个小Canvas绘制到主画布上
2. 控制台会每秒输出当前FPS数值
3. 单独勾选任意一个复选框，FPS保持正常；同时勾选两个，FPS会立刻大幅下降

性能瓶颈猜测 #

我初步判断问题根源在于GPU纹理上传环节：每次修改内存Canvas的内容后，浏览器需要将这个Canvas的像素数据重新上传到GPU显存中。当有500个Canvas每帧都执行这个操作时，会形成严重的带宽瓶颈，导致CPU与GPU之间的数据传输阻塞，最终拖垮整体性能。

实际需求与当前实现 #

我最终要实现的是Canvas颜色的平滑过渡效果，目前的实现方式是使用globalCompositeOperation = "source-in"配合fillRect()来给Canvas图层着色。

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