作为一个爱好项目,我正在尝试创建一个基于 64 * 64 瓦片的地图原型,该地图可以以高性能的方式拖动。如果可行,我想将其扩展到 1024 x 1024 瓷砖。
当前方法
包含所有“平铺”div 的“地图”div。使用这个 jquery 插件,我使地图 div 可拖动。平铺 div 具有 css sprite 背景,因此只需一次调用 img。这适用于一些瓷砖,但随着更多瓷砖变得非常慢。
我试图
通过将它们放在包装器 div 中来规避所有这些瓷砖的 dom 回流,希望它可以在单独的图层中呈现,然后可以作为一个图层移动。没用。
尝试将地图 div 的父 div 溢出设置为隐藏,这样就不会渲染冗余图块。没用。
尝试删除对 jquery 的依赖并自己进行可拖动的实现。工作同样糟糕。所以没用。
将背景图像切换为背景颜色不会提高性能,所以这不是问题。
我还不知道如何实施
的想法 如何确保瓷砖不会触发回流?
将看不见的瓷砖设置为不可见?我可以通过一些努力来实现这一点,但不知道这是否会提高性能。
有什么建议么?