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

Question

作为一个业余爱好项目，我正在尝试创建一个 64 * 64 基于图 block 的 map 原型(prototype)，该 map 可以高效拖动。如果可行，我想将其扩展到 1024 x 1024 block 。

当前方法
包含所有“图 block ”div 的“ map ”div。用this jquery plugin我使 map div 可拖动。tile div 具有 css sprite 背景，因此仅对 img 进行一次调用。这适用于一些瓷砖，但随着更多的瓷砖变得非常慢。

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

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

有什么建议吗？

Answer 1

将图 block 组渲染为 CANVAS 元素，导出为 PNG，然后在拖动时移动它。