はどのように私はSVG

Question

に非常に大きな行列を構築することができます私はキャンバス/ SVGで10000X10000のマトリックスを構築する必要があります。各セルで私は四角形を作成する必要があります。私はそのような2つのループにキャンバスでそれを実行しようとしました：

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

しかし、このループは、多くの時間がかかります。どのようにして大きなマトリックスを良いパフォーマンスで描くことができますか？あなたが最も可能性の高い最高のキャンバスを使用して、図面をやってオフにしている （私は行列内のすべてのセルが、私は、データベースから取得したオブジェクトのマトリックスに応じて異なる動作をすることを必要とする）

おかげ

Answer 1

は、ここに理由です：

SVGを操作するのはかなり簡単ですが、以下に示すように1つのライブDOM挿入を行うだけでも、SVGを描画するのは簡単に高価になります（this article, for example参照）。

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は、まだ要素の何千ものを持っていないだろうさブラウザはそれ自身でレンダリングする方法を理解しなければなりません。

---

キャンバスでの作業は、あなたが空想のスタイルをしたい場合は特に、あなたのために著しくより多くの仕事を意味しますが、レンダリングロジックのほとんどのブラウザを緩和する（そしてそれを自分で処理する）しているとして、それができますはるかに速くなります。

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>

補遺：私は上記の書いたものを行うには良い方法があるかもしれないので、しかし、それは違いを説明するのに十分であろう多くの場合、キャンバスを使用しないでください。「異なる動作を」どういう