Raphael JS Becomes Really Slow When Using Background On A Lot Of Rectangles

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 ki

Solution 1:

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.

If I try to use fill: url('image.png');, it takes longer to draw just 180 hexagons and crashes the browser on 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.

Update:

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.

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.

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.