我有一大组小矩形（4K-5K），我想使用精灵技术为它们提供背景，所以我只有一个图像（否则请求数量会杀死服务器）。
如果我给它们一个彩色背景，那么地图只需要几秒钟就可以构建出来。
我尝试创建一个矩形，对其应用翻译以获得分配的背景图像的不同部分并且有效。但当我只添加 10 个时，速度就非常慢。
难道我做错了什么？
我遇到了类似的问题，尝试生成六边形地图，然后用森林、水、草原等精灵填充六边形。当我用纯色填充它们时，渲染 10K 元素只需要两秒钟。
如果我尝试使用fill: url('image.png');，仅绘制 180 个六边形就需要更长的时间，并且在 10K 时会使浏览器崩溃。
据我所知，问题在于 Raphael JS 为每个元素创建一个单独的纹理定义，然后将其应用为填充。这意味着对于 10K 元素，您有 10K 纹理定义指向同一图像。这不好。
Update:
我最终放弃了 SVG 以用于这种用途。仅创建 HTML 元素并使用 CSS 设置背景要快得多。例如，您可以将它们与 SVG 组合作为顶部的图层。然而，您正在使用相当多的元素。
我通过仅动态加载我需要的元素解决了我的问题，因为所有 10K 不需要同时出现在视口中。
在你的情况下，这并不是一个真正的选择。一个不错的选择是使用 Canvas 来绘制元素。根据我的实验，它在绘制这么多动画时会比 SVG 更快，但如果您使用一些动画，它们将比 RaphaelJS 库更难实现。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
