javascript - 如何在 svg 中构建非常大的矩阵

Question

我需要在canvas/svg中构建一个10000X10000的矩阵。在每个单元格中我需要创建一个正方形。我尝试用 Canvas 做这样的两个循环:

for(i=0; i<10000; i++){
  for(j=0;j<10000; j++){
    /*some code of drwing*/
    console.log(i,',',j);
  }
}

但是这个循环需要很多时间。如何以良好的性能绘制大矩阵？(我需要矩阵中的每个单元格的行为都不同，具体取决于我从数据库获取的对象矩阵)

谢谢

Answer 1

您很可能最好使用 Canvas 进行绘图，原因如下:

虽然 SVG 使用起来相当简单，但绘制起来很容易变得昂贵(请参阅 this article, for example )，即使您只执行一次实时 DOM 插入，如下所示。

function createSvgElement(tag, props) {
  var el = document.createElementNS("http://www.w3.org/2000/svg", tag);
  for (prop in props) {
    el.setAttributeNS(null, prop, props[prop]);
  }
  return el;
}

var svg = document.getElementById('svg');

document.getElementById('input').onclick = function render() {
  var start = new Date();
  var fragment = document.createDocumentFragment();
  for (var x = 0; x < 400; x++) {
    for (var y = 0; y < 400; y++) {
      var circle = createSvgElement('circle', {
        'cx': x,
        'cy': y,
        'r': 0.2,
        'fill': 'red'
      });
      fragment.appendChild(circle);
    }
  }
  svg.appendChild(fragment);
  var time = new Date() - start;
  document.body.appendChild(document.createTextNode(time + 'ms'));
}

svg {
  display: block;
}

<input id="input" type="button" value="render svg" />
<svg id="svg" width="400" height="400"></svg>

SVG 的主要问题是，无论您做了多少努力来减少浏览器的工作，最终，DOM 仍然会有数千个元素，浏览器必须弄清楚如何自行渲染.

<小时/>

使用 Canvas 对您来说意味着明显更多的工作，特别是如果您想要制作花哨的样式，但是当您减轻浏览器的大部分渲染逻辑(并自己处理它)时，速度会快得多.

var canvas = document.getElementById('canvas');

document.getElementById('input').onclick = function render() {
  var start = new Date();
  var context = canvas.getContext('2d');
  for (var x = 0; x < 400; x++) {
    for (var y = 0; y < 400; y++) {
      context.beginPath();
      context.arc(x, y, 0.2, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();
      context.closePath();
    }
  }
  var time = new Date() - start;
  document.body.appendChild(document.createTextNode(time + 'ms'));
}

canvas {
  display: block;
}

<input id="input" type="button" value="render canvas" />
<canvas id="canvas" width="400" height="400"></canvas>

附录:我不经常使用 Canvas ，因此可能有更好的方法来完成我上面所写的操作，但是，它足以说明差异。