在JS中分割雪碧片/芯片组的高性能方法是什么？

Question

我正在为html/js编写一个2d世界编辑器，并试图找到将一组芯片(如下面所示)分割成多个小方块(芯片)的最佳方法。

目前，我使用的方法类似于默认的css方法，即使用背景位置移动许多小<div>元素的背景，直到每个元素显示一个方形/芯片的芯片组。

它运行良好，没有大的性能问题，但它似乎是一个整体笨重的方法。

我想过的其他方法是将芯片组分割成许多临时图像，并为每个图像创建一个<image>元素，或者使用<canvas>而不是<div>'s或<image>'s

不管怎样，我在寻求关于这个问题的建议：

在JS?中分割雪碧片/芯片组的高性能方法是什么？

​

​

芯片组的例子

Answer 1

你现在做的应该很快。实际上，您可以在画布级别上重新实现这一点，只存储一个图像，然后使用drawImage只从其中绘制部分。据我所知，这是最常见的方法，而且速度非常快。至少这是我写游戏引擎使用画布。时的经历

使用画布很可能更快、更节省内存，因为您没有额外的DOM开销，但是您必须为您的特定用例度量它并验证它。

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

简而言之:使用画布总是更快(对于类似的实现)，因为您几乎是直接与GPU接口。从一个图像绘制，而不是将它复制到多个子图像将总是更快，因为你不会有重复的内存坐在周围，只要你是从同一张纸，GPU不需要切换出纹理。