Fabric.js Efficienza di sprite ritagliate rispetto a singole immagini

Question

Intendo disporre di una tela FabricJS che visualizzerà potenzialmente dozzine di grafica diversa, che potrebbero essere pubblicate come singoli file di immagine o sprite. Per ogni immagine, è possibile che un particolare grafico venga visualizzato sulla tela 0 a decine di volte. So che FabricJS ha l'abilità clipping, che renderebbe possibile l'uso di sprites, e so che, in generale, gli sprite sul Web sono altamente preferiti rispetto alle singole immagini, come per i CSS.

Tuttavia, ho anche sentito parlare di comportamenti del browser/stranezze che circondano la tela in cui sono presenti alcune ottimizzazioni che si potrebbero verificare, non - Non riesco a trovare il collegamento al momento, ma quello che ricordo era il modo in cui i grandi elementi di contenuto della tela in vista in Chrome richiedevano ancora molto tempo per essere calcolati/"resi", nonostante non fossero rilevanti per l'aspetto sullo schermo.

Quindi, ci sono delle aspettative noti sulla se n immagini non ritagliate individuali sarebbero preferibili/unpreferable ad uno sprite che è ritagliato n volte per una tela FabricJS? Nel caso in cui ciò fosse importante, questa non sarebbe una tela FabricJS fortemente animata; le cose possono spostarsi quando vengono trascinate, ad esempio, ma l'animazione costante non è ciò che è coinvolto in questo caso.

Answer 1

Basta fare un test per scoprire cosa rallenta il PC. Dipende dal PC, dal browser e dalla scheda grafica.

Non so nulla di Fabric.js, ma le CPU e le schede grafiche del computer possono gestire facilmente la manipolazione del clipping/grafica. Non stai visualizzando milioni di poligoni come un gioco 3D, quindi dovresti stare bene.

Ecco un sito web che spiega le sprite CSS vs singole immagini di rete di prestazioni aumenta: https://medium.com/parlay-engineering/emoji-at-scale-render-performance-of-css-sprites-vs-individual-images-f0a0a2dd8039