Javascript 在JS中拆分精灵片/芯片集的高性能方法是什么？

我正在为html/js开发一个2d世界编辑器，并试图找到将芯片集（如下所示）拆分为多个小正方形（芯片）的最佳方法

目前，我正在使用一种类似于默认css sprite sheets方法的方法，即使用背景位置移动许多小

元素的背景，直到每个元素都显示芯片集的一个正方形/芯片

它工作得很好，没有大的性能问题，但它似乎是一个整体笨拙的方法

我想到的其他方法是将芯片组分割成许多临时图像，并为每个图像制作一个

元素，或者使用

而不是

的
或

不管怎样，我正在寻找关于这个主题的建议：

在JS中拆分精灵片/芯片组的高性能方法是什么？


芯片组示例现在的操作方式应该非常快。您可以在画布级别上重新实现这一点，只存储一个图像，然后使用它仅绘制部分。据我所知，这是最常见的方法，速度非常快。至少这是我写一篇文章时的经历

使用画布很可能更快、内存效率更高，因为您没有额外的DOM开销，但您必须针对特定用例对其进行度量并验证

正如您所建议的那样，创建一组单独的图像将非常缓慢，因为它需要复制图像的一部分并为每个图像创建一个额外的DOM元素

简而言之：使用画布总是更快（对于类似的实现），因为您几乎直接与GPU接口。从一个图像中绘图而不是将其复制到多个子图像中总是会更快，因为您不会有重复的内存，只要您从同一张图纸中绘图，GPU不必关闭纹理。
是一个很好的精灵引擎。您可以执行类似于使用drawImage canvas方法的操作，将图像加载到svg中，然后使用viewbox属性对其进行切片；在这种情况下测试性能会很有趣。@maioman这种方法听起来很有趣，对于一些有趣的基于芯片的效果肯定非常有用。这也可能是一个很好的角色移动/点击框的解决方案。关于
div
和
rect
之间开销差异的任何信息？我想我将使用dom样式进行托盘和画布的实际级别设计。非常感谢。另外，火箭游戏运行得非常好。上面评论中有人提到了SVG。你知道他们是怎么比较的吗？我认为它们可能对热播和特效有用。