SVG rect vs div vs canvas

Question

3000の部屋を持つ大規模な建物のフロアプランのためのGoogleマップの構築を想像してください。

最大3000個の四角形を表示する必要があります（ランダムなポリゴンをレンダリングすることもできますが、現時点では最大の問題ではありません）。それぞれには、マウスオーバーやクリックなどのイベントが添付されている必要があります。このイベントは、ページ上の他のDOM要素に影響を与えます。ズームインとズームアウトができるようにする必要もあります。

私はSVG（Raphael.js）、プレーンdivsレンダリングまたはキャンバスでそれを行うことができます。

ビルドしようとしているものを作るための具体的な推奨事項がありますか？最も遅いブラウザでは、十分速くレンダリングする必要があります（約1秒程度）。 （IE8、Firefox 3.6、うまくいけばIE7、あまりにも夢を見ていないのに...）

Nicolas。

PS：これまでのところ、Raphael.jsを使用したIE8では、3000個の四角形のレンダリングに7秒かかることがありましたが、これはやや遅いです。 IE8では、プレーンDIVをレンダリングするのが最大6倍速くなっているようです。

Answer 1

イベントが接続された3000のDOMオブジェクトは、処理するマシンによっては非常に苦労します。一般に、「1000」の範囲に入ると、DOMベースのソリューション（div、SVG）のパフォーマンスはとなり、実際にはが悪くなります。多くのDOM要素で適切な読み込み時間を得ることは不可能です。

excanvas自体のパフォーマンスも非常に悪いです。 2番目にはアニメーションがあり、excanvasのパフォーマンスはひどく変わる。 excanvasはVML（SVG）を作成するだけでキャンバスを模倣するので、SVG/VMLだけではなく、少なくとも遅く（ほとんど常に遅くなり）ます。

は、詳細な分析のためにここに私の答えを参照してください：HTML5 Canvas vs. SVG vs. div

私はあなたのリスト上の要件の一つは行くことを持っていると信じています。オブジェクトの数、パフォーマンス、またはプラットフォーム。

可能であれば古いブラウザのサポートを中止し、Canvasを使用することをお勧めします。