当在很多矩形上使用背景时，Raphael JS变得非常慢

Question

我有一大堆小矩形（4K-5K），我想使用精灵技术为它们提供背景，所以我只有一个图像（否则请求的数量会杀死服务器）。

如果我给他们一个彩色背景，地图只需几秒钟即可建成。

我尝试创建一个矩形，对它应用一个平移，以获得分配的背景图像的不同部分，并且可以正常工作。但是当我添加其中只有10个时，速度非常慢。

我做错了吗？

Answer 1

我遇到了类似的问题，尝试生成六边形地图，然后用森林，水，草原等精灵填充六边形。当我用纯色填充它们时，只需要两秒钟来渲染10K元素。

如果我尝试使用fill: url('image.png');，则只需绘制180个六边形并在10K上崩溃浏览器需要更长的时间。

据我所知，问题是Raphael JS为每个元素创建了一个单独的纹理定义，然后将其作为填充应用。这意味着对于10K元素，您有10K纹理定义指向同一图像。这是不好的。

<强>更新

我最终放弃了SVG这种用法。创建HTML元素并使用CSS设置背景更快。例如，您可以将它们与SVG组合为一个顶层。但是你正在使用很多元素。

我通过动态加载我需要的元素解决了我的问题，因为所有10K都不需要同时在视口中。

在你的情况下，这不是一个真正的选择。一个很好的选择是使用Canvas绘制元素。从我的实验来看，它会比SVG快得多，尽管如果你使用的是动画，它们将比使用RaphaelJS库更难实现。