Fabric.js Effizienz von Clipped Sprite im Vergleich zu Einzelbildern

Question

Ich beabsichtige ein FabricJS-Canvas zu haben, das potentiell Dutzende verschiedener Grafiken anzeigt, die entweder als einzelne Bilddateien oder als Sprite angezeigt werden können. Für jede Grafik ist es möglich, dass eine bestimmte Grafik auf der Leinwand 0 bis dutzendfach angezeigt wird. Ich weiß, dass FabricJS die Fähigkeit clipping hat, die die Verwendung von Sprites ermöglichen würde, und ich weiß, dass Sprites im Web den einzelnen Bildern, wie etwa für CSS, in der Regel den Vorzug geben.

Allerdings habe ich auch von Browserverhalten/Macken in der Umgebung von Canvas gehört, wo einige Optimierungen, die Sie erwarten könnten, nicht stattfinden - ich kann den Link im Moment nicht finden, aber einen, an den ich mich erinnere war, dass große Canvas-Content-Elemente, die in Chrome nicht sichtbar sind, immer noch eine beträchtliche Zeit benötigen, um berechnet/"gerendert" zu werden, obwohl sie für das Erscheinungsbild auf dem Bildschirm nicht relevant sind.

So sind es bekannte Erwartungen, ob n einzelne nicht-beschnittenen Bilder vorzuziehen/unvorteilhaft auf ein Sprite sein würde, die n mal für eine FabricJS Leinwand abgeschnitten wird? Falls es darauf ankommt, wäre dies keine stark animierte FabricJS-Leinwand; Dinge können sich bewegen, wenn sie zum Beispiel gezogen werden, aber konstante Animation ist in diesem Fall nicht involviert.

Answer 1

Testen Sie selbst, um herauszufinden, was Ihren PC verlangsamt. Es kommt auf den PC und den Browser und die Grafikkarte an.

Ich weiß nichts über Fabric.js, aber Computer-CPUs und Grafikkarten können einfach mit Clipping/Grafik-Manipulation umgehen. Du zeigst keine Millionen von Polygonen wie ein 3D-Spiel, also sollte es dir gut gehen.

Hier ist eine Website, die das CSS-Sprites vs einzelnen Bilder Netzwerk-Leistung steigt, erklärt: https://medium.com/parlay-engineering/emoji-at-scale-render-performance-of-css-sprites-vs-individual-images-f0a0a2dd8039