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

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

如果我给他们一个彩色背景，地图只需要几秒钟就可以绘制出来

我试图创建一个rect，对其应用一个翻译，以获得指定的背景图像的不同部分，这是可行的。但当我只加上10个的时候，速度就慢得令人难以置信了

---

我做错了什么吗？

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

如果我尝试使用

fill:url（'image.png'），仅绘制180个六边形所需的时间更长，浏览器在10K时崩溃

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

更新：

我最终放弃了SVG的这种用法。只需创建HTML元素并使用CSS设置背景就可以更快。例如，您可以将它们与SVG组合为一个位于顶部的层。然而，您使用的是相当多的元素

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

在你的情况下，这不是一个真正的选择。一个好的替代方法是使用画布绘制元素。从我的实验来看，在绘制这么多动画时，它将比SVG更快，尽管如果您使用一些动画，它们将比RaphaelJS库更难实现。
您可以创建一个包含这些动画的元素，然后通过
fill:url（#myPattern）
使用它。这将产生更小、更高效的svg。Raphaël可能不会为您这样做，但它可以。请尝试使用
http://www.kineticjs.com/
用于画布目的。现在正在处理一个SVG负载很重的项目，想知道这是否会更好。