作为一个爱好项目，我正在尝试创建一个基于64 * 64平铺的地图的原型，该地图可以以高效的方式拖动。如果这样可行，我想将其扩展到1024 x 1024个磁贴。
目前的方法
包含所有“tile”div的“map”div。
使用this jquery plugin我使地图div可拖动。
tile div具有css sprite背景，因此只对img进行一次调用。
这适用于一些瓷砖，但随着更多瓷砖变得非常慢。
我尝试了什么
想要绕过所有这些瓷砖的dom reflow，将它们放在一个包装div中，希望它将在一个单独的层中呈现，然后可以作为一个移动。没工作。
尝试将地图div的父div溢出设置为隐藏，因此不会渲染冗余切片。没工作。
尝试删除对jquery的依赖并自己执行可拖动的实现。工作同样糟糕。所以没有用。
将背景图像切换为背景颜色不会提高性能，因此不是问题。
想法我不知道如何实施
如何确保瓷砖不会引发回流？
将看不见的瓷砖设置为不可见吗？我可以通过一些努力来实现这一点，但不知道这是否会提高性能。
有什么建议吗？
答案 0 :(得分：1)
将图块组渲染为CANVAS元素，导出为PNG，然后在拖动时移动它。