拖拽数千个 dom 元素，兼顾性能

Question

作为一个爱好项目，我正在尝试创建一个基于 64 * 64 瓦片的地图原型，该地图可以以高性能的方式拖动。如果可行，我想将其扩展到 1024 x 1024 瓷砖。

目前的方法
包含所有“平铺”div 的“地图”div。 使用this jquery plugin，我使地图 div 可拖动。 平铺 div 具有 css sprite 背景，因此只需一次调用 img。 这对一些瓷砖效果很好，但随着更多瓷砖变得非常慢。

我尝试了什么
考虑通过将它们放在包装器 div 中来规避所有这些图块的 dom 回流，希望它可以在单独的层中呈现，然后可以作为一个层移动。没用。
尝试将地图 div 的父 div 溢出设置为隐藏，这样就不会渲染冗余图块。没用。
尝试删除对 j​​query 的依赖并自己执行可拖动的实现。工作同样糟糕。所以没用。
将背景图像换成背景颜色并不能提高性能，所以这不是问题。

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

有什么建议吗？

Answer 1

将这组图块渲染到一个 CANVAS 元素，导出为 PNG，然后在拖动时移动它。