13

10138 パーツの SVG 図面があるため、実行が遅くなります。http://workshop.chromeexperiments.com/globe
のように実行したい

ここに私が検討している解決策/質問があります

  • SVG パーツをプロセッサの負荷が少ない方法でレンダリングする方法はありますか?
  • SVG を WebGL またはキャンバスに変換できますか?
  • SVG として実行し、WebGL またはキャンバスを介してレンダリングすることはできますか?

私はそれをより速くしたいだけです..考え？

ここにスクリーンショットがあります

4

2 に答える 2

21

簡単な経験則として：

  • SVG は、描画するオブジェクトの数に比例してスケーリングします
  • キャンバスは、解像度に応じて相互にスケーリングします。

そのため、SVG を使用してメモリに保持するオブジェクトを 10138 個にすると、速度が低下します (ただし、ハード リミットが何であるかはわかりません)。この範囲のオブジェクトに入ると、canvas と WebGL の方がパフォーマンスが向上する可能性があると思います。最新のブラウザーのほとんどは、ハードウェア アクセラレーションによるキャンバス レンダリングを既にサポートしています。
ただし、ユーザー インタラクションの実行は、SVG に比べて Canvas の方が複雑です。

それらを混ぜてみることもできます (詳細については、こちらを参照してください)。
役立つリソースを次に示します。

于 2012-07-25T15:30:06.030 に答える
15

断片の数が非常に多い SVG の速度低下は、SVG の非保持モードに起因します。SVG がどのように見え、どのように動作するかについての詳細がなければ、具体的な提案をすることは困難です。したがって、一般的に：

  • グラフィックが一般的に静的である場合 (グラフィック オブジェクトごとにマウス イベントを追跡する必要がない場合)、代わりに HTML5 キャンバスを使用できます (描画コマンドがピクセルを画像にブリットすると、基本的に静的な画像が得られます)。

  • グラフィックに多くの繰り返し部分がある場合、<use>要素で SVG を使用すると、メモリ フットプリントが削減され、パフォーマンスが向上する可能性があります。

于 2012-07-24T22:46:03.253 に答える