裁剪 Sprite 与单个图像的 Fabric.js 效率

Posted 2023-03-25

【中文标题】裁剪 Sprite 与单个图像的 Fabric.js 效率

【英文标题】：Fabric.js Efficiency of Clipped Sprite vs. Individual Images

【发布时间】：2016-01-02 19:45:47

【问题描述】：

我打算拥有一个 FabricJS 画布，它可能会显示数十种不同的图形，这些图形可以作为单独的图像文件或精灵提供。对于每个图形，特定图形可能会在画布上显示 0 到几十次。我知道 FabricJS 具有clipping 能力，这将使精灵的使用成为可能，而且我知道一般来说，网络上的精灵比单个图像更受青睐，例如 CSS。

但是，我也听说过围绕画布的浏览器行为/怪癖，您可能希望在其中进行一些优化，但不要 - 我目前找不到链接，但我记得有一个是尽管与屏幕外观无关，但 Chrome 中无法看到的大型画布内容元素仍需要花费大量时间来计算/“渲染”。

那么，对于 FabricJS 的 n 次单独的非剪辑图像是否比被剪辑 n 次的精灵更可取/不优选，是否有任何已知的期望？画布？ 万一这很重要，这不会是一个重动画的 FabricJS 画布；例如，拖动时物体可能会移动，但在这种情况下不涉及持续动画。

【问题讨论】：

根据caniuse.com/#feat=canvas 没有任何剪辑相关问题（请参阅已知问题选项卡）。也就是说，我认为您应该选择您最喜欢的三个平台（chrome、ios 和....android，比如说...）并进行一些基本的性能测试。

@dsummersl 有趣的是，caniuse.com 确实提到了 Android 中的剪辑问题。它链接到的错误报告已被关闭，因为没有明确的解决方案。

哦，是的，是的...阅读票证，这听起来可能是 1/3 的 android 浏览器的问题（来自developer.android.com/about/dashboards/index.html 的粗略猜测）。

【参考方案1】：

只需自己做一个测试，看看是什么让你的电脑变慢了。这取决于 PC、浏览器和显卡。

我对 Fabric.js 一无所知，但计算机 CPU 和显卡可以轻松处理剪辑/图形操作。您不会像 3D 游戏那样显示数百万个多边形，所以应该没问题。

这是一个解释 CSS 精灵与单个图像网络性能提升的网站： https://medium.com/parlay-engineering/emoji-at-scale-render-performance-of-css-sprites-vs-individual-images-f0a0a2dd8039

【讨论】：

谢谢，但这个答案不能满足这个问题。如果需要，我可以编写自己的测试，是的，但我问了 SO，以防有人会从以前的经验或测试中分享一些足够的知识。关于形状的数量，我在使用Fabric.js 画布和数百或数千个元素的工作经验中存在显着差异，因此我不会做数百万个形状的事实并不足以让精灵感到舒适要走的路。