通过每帧绘制数千个矩形来提高 HTML5 画布的性能

Question

我正在根据从服务器提取的实时频谱数据创建瀑布图。画布当前设置为渲染 100 行时间数据，每行 64 个点（每帧最多渲染 64,000 个矩形）。在网络工作者中，以下代码片段控制渲染：

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

// ...
// map points to colors using d3.scaleSequential(...)
// (little impact on performance)
// ...

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();
}

但是，在三个浏览器中进行测试，这种方法每次大约慢一半，这让我感到惊讶。

请给我一些关于可用于优化图表的其他技术的提示。

Answer 1

1. 您可以使用

   ImageData

   来避免循环每次迭代的绘图成本。

• 在画布上绘制 10,000 个对象 javascript;
• 在 html5 canvas 中渲染大量元素。

2. 你可以避免

   text-rendering

   ，或者把它放在另一个分层画布上；
3. 避免使用浮点坐标并使用整数，以避免子像素渲染成本。