Javascript 在考虑性能的情况下拖动数千个dom元素

作为一个爱好项目，我正在尝试创建一个基于64*64平铺的地图原型，它可以以一种高性能的方式拖动。如果这是可行的，我想把它扩展到1024x1024个瓷砖

当前方法
包含所有“平铺”div的“映射”div。 我用它来绘制地图。 tile div具有css精灵背景，因此只需对img进行一次调用。 这在使用少量瓷砖时效果很好，但在使用更多瓷砖时会变得非常缓慢

我所尝试的
人们认为，通过将这些图块放入包装器div，可以避免所有这些图块的dom回流，希望它能够在一个单独的层中渲染，然后作为一个层移动。不起作用。
已尝试将贴图div的父div overflow设置为hidden，以便不会渲染多余的分幅。不起作用。
尝试删除对jquery的依赖，并亲自执行可拖动的实现。工作同样糟糕。所以没有起作用。
将背景图像切换为背景色不会提高性能，因此这不是问题所在

我还不知道如何实施的想法
如何确保瓷砖不会触发回流？
设置看不见的瓷砖是否会设置为“不可见”？我可以通过一些努力来实现这一点，但不知道这是否会提高性能

---

有什么建议吗？

将瓷砖组渲染为画布元素，导出为PNG，然后拖动它。

你有在线的工作示例吗？如果我在家里的电脑上，我可以看看是否可以制作一个。这是一个解决方案。不过，它消除了动画平铺的可能性。@BorisCallens:您可以为画布设置动画，但必须为每一帧重新绘制。大卫：难道不能简单地拖动画布吗？无需将画布保存为PNG，这是一个相对繁重的功能。您当然可以拖动画布。拖动PNG稍微轻一点，这取决于您“缓存”到图像的频率。在动画中，这通常至少是每秒24次@BorisCallens必须看看2中哪一个更快。取决于动画。你能用动画GIF/PNG逃脱吗？它真的需要这么多细节吗？