私はたくさんの小さなウィジェット (上に描かれている<canvas>
) を表示するためのインターフェースを計画しています. ウィジェットの数は、10 から 100 の間のどこかです。
1 つの大きなキャンバスでこれを行い、適切な場所に多数のウィジェットをペイントするだけです。または、s で多くの<canvas>
sesを使用できます<li>
。キャンバスはこの種のことに対して十分に軽量ですか? どちらかを選択する説得力のあるパフォーマンス上の理由はありますか?
私はたくさんの小さなウィジェット (上に描かれている<canvas>
) を表示するためのインターフェースを計画しています. ウィジェットの数は、10 から 100 の間のどこかです。
1 つの大きなキャンバスでこれを行い、適切な場所に多数のウィジェットをペイントするだけです。または、s で多くの<canvas>
sesを使用できます<li>
。キャンバスはこの種のことに対して十分に軽量ですか? どちらかを選択する説得力のあるパフォーマンス上の理由はありますか?
私はBPMを代表するために 3 年前に似たようなことをしなければなりませんでした。<canvas>
私はそれを(canvas と VML の両方の上に lib を構築しました - for IE - ) で実装し、 u が提案した 2 番目のオプションを選択しました。
キャンバスの問題は、多くの操作 (特定の要素をクリックする、移動するなど) がある場合、そのたびにすべてを再描画する必要があることです (要素でいっぱいの大きなキャンバスの場合、これは最適ではありません)。性能条件)。私は X プレースホルダー (各プレースホルダーはキャンバスを含む div です) を表現することを好みました。パフォーマンスが向上し、明らかに DOM イベント (キャンバスのコンテナーに接続されている) の管理がはるかに簡単であることに気付きました。
この種のインタラクティブなものを実装する別の方法は、たとえばraphaelJSSVG
を使用することです(今のところ、私はこれを好みます) 。相互作用のないアニメーションと 2D 表現には、.<canvas>
高さが600pxを超えるキャンバスでは、パフォーマンスが低下すると聞きました。したがって、これを回避することをお勧めします。今すぐ参照を探しています...