画布drawImage从多个画布到一个画布缓慢的铬

Question

我想用画布中的+ 10k对象绘制一张大地图。对象基本上是许多圆圈（可能多达10种不同的颜色，所有相同的尺寸）和很少的单独形状的多边形。我还需要平移和缩放地图。

我现在专注于绘制圆圈，并根据here提出的建议尝试了许多不同的实现。

以全分辨率的一个离屏画布作为缓冲区并使用drawImage裁剪当前视口并将其绘制在我的屏幕画布上，效果很好，直到我达到16M像素的iPhone尺寸限制。 我决定拆分缓冲区画布，并为与视口相交的每个缓冲区画布调用drawImage。（参见图形）。

这在safari，firefox上运行得非常好，并且在iPhone safar上也非常快，但在Chrome中速度非常慢。

这是在动画帧中调用的代码（但仅在某些内容发生变化时），这会导致滞后。

console.time("copy");
buffers = this.getBuffersInViewport(vp);
for(var i = 0; i < buffers.length; i++){
  var buffer = buffers[i];
  var sx = Math.round(Math.max(0,vp.minX - buffer.minX));
  var sy = Math.round(Math.max(0,vp.minY - buffer.minY));
  var sWidth = Math.round(buffer.width - sx);
  var sHeight = Math.round(buffer.height - sy);
  var dx = Math.round(Math.max(0,buffer.minX-vp.minX) * vp.scale);
  var dy = Math.round(Math.max(0,buffer.minY-vp.minY) * vp.scale);
  var dWidth = Math.round(sWidth * vp.scale);
  var dHeight = Math.round(sHeight * vp.scale);    
  this.context.drawImage(buffer,sx,sy,sWidth,sHeight,
    dx,dy,dWidth,dHeight);
}
console.timeEnd("copy");

console.time的结果： Chrome：~200ms Safari：约0.5ms Firefox：~10ms 勇敢：〜200ms

我似乎正在做一些铬引擎不喜欢的事情。 我宁愿为chrome修复此问题，而不是再次更改我的应用程序的lgoic。