A super weird case with SVG performance

(Image from By W3C, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=89557878)

I have this super weird case where I need to display a big tree of text with svg icons. For some reason on the latest Chrome it took almost 30seconds just to render the whole tree (insane). I took a look at Webflow which has a similar tree and there seems to be no issue at all.

My tree was rendered by Vuejs 2.x, I'm not sure if there is anything to do with that, I could not figure out why. The only thing that I could think of, is that inside the Vuejs template I use something like this to render the svg:

<svg>
  <use xlink:href="#general_small--arrow_2_down"></use>
</svg>

(The svg sprite is printed on the top of the body tag with display none)

In any case, I put in this temporary fix which manages to bring down the rendering from 30s to 2s:

1. Add a class to hide (display:none) all svg inside the tree every time I need to re-render the tree
2. Set time out (something like 200ms)
3. Remove the class

And now all the SVG icons are shown nicely, instantly.

Edit 1:

So I think I found the issue. The inline sprite svg file that I was including was huge (hundreds of svg files), and it seems like that slows down the lookup drastically (even though the file was already included inline in html). By splitting the file into smaller files I was able to speed up the rendering multiple times.