Fabric.jsクリッピングされたスプライトと個々の画像の効率

Question

私は、おそらく個々の画像ファイルまたはスプライトのいずれかとして提供される可能性のある数十種類の異なるグラフィックスを表示するFabricJSキャンバスを持つつもりです。各グラフィックでは、キャンバスに0〜数十回表示される可能性があります。 FabricJSにはclippingという能力があり、スプライトの使用を可能にすることが分かっています。一般に、ウェブ上のスプライトは、CSSなどの個々の画像よりも非常に好まれています。

しかし、キャンバスを取り巻くブラウザの動作やクォークについても聞いたことがあります。ここでは、最適化が行われると思われますが、現時点ではリンクが見つかりませんが、画面上の表示には関係なく、Chromeの表示領域からどれだけ大きなキャンバスコンテンツ要素が計算/「レンダリング」されるのに相当な時間がかかりますか。だから、

、nは個々の非切り出し画像がFabricJSキャンバスためのn回をクリップしていますスプライトに好ましくない/望ましいだろうか上の任意の既知の期待があるのですか？重要な場合は、これは大きく動くFabricJSキャンバスではありません。たとえば、ドラッグすると物が動くかもしれませんが、定数アニメーションはこの場合には関係しません。

Answer 1

PCを遅くする原因を突き止めるために、自分でテストしてください。それはPCとブラウザとグラフィックスカードによって異なります。

Fabric.jsについてはわかりませんが、コンピュータのCPUやグラフィックスカードでは、クリッピングやグラフィック操作を簡単に処理できます。あなたは3Dゲームのような何百万ものポリゴンを表示していないので、あなたはうまくいくはずです。

は、ここで個々の画像ネットワークのパフォーマンスが増加対CSSスプライトを説明するウェブサイトです： https://medium.com/parlay-engineering/emoji-at-scale-render-performance-of-css-sprites-vs-individual-images-f0a0a2dd8039