7

3,000 室の大きな建物の間取り図用に Google マップを構築することを想像してみてください。

最大 3000 個の長方形を表示する必要があります (ランダムなポリゴンもレンダリングできるのが最善ですが、現時点では、これは最大の問題ではありません)。それらのそれぞれには、マウスオーバーやクリックなど、ページ上の他の dom 要素に何らかの影響を与えるイベントが関連付けられている必要があります。また、ズームインおよびズームアウトできる必要があります。

SVG (Raphael.js)、プレーンな div レンダリング、またはキャンバスで実行できることはわかっています。

私が構築しようとしているものに対して、誰かが具体的な推奨事項を持っているかどうか疑問に思っています。最も遅いブラウザーでも十分に高速 (約 1 秒程度) にレンダリングする必要があります。(IE8、Firefox 3.6、できれば IE7 ですが、あまり夢はありませんが...)

助けてくれてありがとう、ニコラス。

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

4

1 に答える 1

9

イベントが添付された 3000 の DOM オブジェクトは、一部のマシンでは処理が非常に困難になります。一般に、「数千」の範囲に入ると、DOM ベースのソリューション (div、SVG) のパフォーマンスは非常に悪くなります。これだけ多くの DOM 要素を使用して読み込み時間を短縮することはほぼ不可能です。

また、excanvas 自体のパフォーマンスも非常に悪いです。2 番目のアニメーションがあると、excanvas のパフォーマンスがひどくなります。excanvas は、VML (SVG) を作成することで Canvas を模倣するだけなので、SVG/VML だけを実行するよりも少なくとも同じくらい遅くなります (ほとんど常に遅くなります)。

詳細な分析については、こちらの回答を参照してください: HTML5 Canvas vs. SVG vs. div

あなたのリストにある要件の 1 つをなくさなければならないと思います。オブジェクトの数、パフォーマンス、またはプラットフォーム。

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

于 2011-08-27T05:46:01.600 に答える