如何优化HTML5 Canvas绘制数万矩形的瀑布图渲染性能？

问题描述 #

我正在基于服务器获取的实时频谱数据创建瀑布图，当前Canvas需要渲染100行时间数据，每行64个点（每帧最多绘制64000个矩形）。渲染逻辑在Web Worker中实现，目前的代码如下：

context.clearRect(0, 0, canvas.width, canvas.height);

// ...
// 使用d3.scaleSequential(...)将点映射为颜色
// （对性能影响极小）
// ...

for (let [color, points] of Object.entries(colorCoordinates)) {
  context.fillStyle = color;
  for (let point of points) {
    context.fillRect(...point);
  }
}

这已经是对之前线性设置颜色方案的改进（原方案需要数千次修改context.fillStyle，速度极慢）。当前方案性能尚可，但在接近30fps时会出现卡顿。

我还尝试过另一种方法，参考其他方案使用beginPath + rect + fill：

for (let [color, points] of Object.entries(colorCoordinates)) {
  context.fillStyle = color;
  context.beginPath();
  for (let point of points) {
    context.rect(...point);
  }
  context.fill();
}

但在三款浏览器中测试后，该方法的速度约为前一种的一半，这让我感到意外。

请提供一些可用于优化该图表的技术技巧。

优化技巧 #

• 直接操作ImageData像素：放弃绘制矩形，通过context.createImageData()创建像素数据对象，直接将每个矩形对应的像素区域填充目标颜色的RGB/RGBA值。这种方式绕开Canvas绘制API的上层开销，直接操作底层像素，是性能提升最显著的方案。
• 缩小重绘区域：瀑布图是逐行滚动的，无需每次清空整个Canvas。可以将已有内容向上平移一行高度，只重绘新加入的一行数据，大幅减少单帧绘制量。
• 合并连续同色块：同一颜色的矩形如果在同一行连续排列，不要逐个绘制，合并成一个大矩形。比如同一行连续5个同色点，直接绘制宽度为5倍单个点宽度的矩形，减少绘制调用次数。
• 避免循环内参数解构：fillRect(...point)的解构操作存在微小开销，提前将point的x、y、width、height提取为变量，直接传入fillRect(x, y, w, h)。
• 使用OffscreenCanvas：如果浏览器支持，用OffscreenCanvas替代普通Canvas，配合Web Worker能更高效地渲染，避免主线程阻塞，提升帧率稳定性。
• 预计算颜色数值：将d3映射后的颜色提前转换为Canvas原生支持的数值格式（如0xFF0000），避免渲染循环中进行颜色格式转换。
• 降低Canvas分辨率：若视觉效果允许，适当缩小Canvas的实际尺寸，再通过CSS拉伸显示，减少需要绘制的像素总量。

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