在许多矩形上使用背景时，Raphael JS的速度变得非常慢 [英] Raphael JS becomes really slow when using background on a lot of rectangles

问题描述

我有一大套小矩形(4K-5K)，并且我想使用Sprite技术为它们提供背景，所以我只有一个图像(否则，请求数量会杀死服务器).

I have a big set of small rectangles (4K-5K) and I want to use the sprite technique to give them the background, so I have only one image (otherwise the number of requests would kill the server).

如果我给他们提供彩色背景，则只需几秒钟即可构建地图.

If I give them a coloured background, the map takes only a few seconds to build.

我试图创建一个rect，对其进行翻译，以获取分配的背景图像的不同部分，并且可以正常工作.但是，即使我只添加10个，它的速度也非常慢.

I tried to create a rect, apply a translation to it to get a different part of the background image assigned and that works. But when I add even only 10 of them it is incredibly slow.

我做错什么了吗?

推荐答案

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

I had a similar problem, trying to generate a hexagonal map and then fill the hexagons with sprites like forest, water, grassland. When I fill them with a solid color it takes just two seconds to render 10K elements.

如果我尝试使用fill: url('image.png');，则仅绘制180个六边形会花费更长的时间，并使浏览器崩溃10K.

If I try to use fill: url('image.png');, it takes longer to draw just 180 hexagons and crashes the browser on 10K.

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

As far as I can tell, the problem is that Raphael JS creates a separate texture definition for each element and then applies it as the fill. This means that for 10K elements you have 10K texture definitions that point to the same image. This is bad.

更新:

我最终放弃了这种用法的SVG.仅创建HTML元素并使用CSS设置背景会更快.例如，您可以将它们与SVG结合在一起作为顶层.但是，您正在处理很多元素.

I ended up ditching SVG for this kind of usage. It's way faster to just create HTML elements and set the backgrounds with CSS. You can combine them with SVG as a layer on top for example. However you are working with quite a lot of elements.

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

I solved my problem by dynamically loading only the elements I need, because all 10K don't need to be in the viewport at the same time.

在您的情况下，这不是真正的选择.一个很好的替代方法是使用画布"绘制元素.根据我的实验，绘制这么多动画的速度会比SVG快，尽管如果使用某些动画，则比RaphaelJS库更难以实现.

In your case that is not really an option. A good alternative would be using Canvas to draw the elements. From my experiments it will be faster than SVG at drawing this many although if you are using some animations, they will be harder to implement than with the RaphaelJS library.

这篇关于在许多矩形上使用背景时，Raphael JS的速度变得非常慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！