FontAwesome 5 SVG icons: data-search-pseudo-elements causes 100X slowdown in rendering

Question

When I enabled data-search-pseudo-elements it causes a 100x+ slowdown in the performance of rendering rows with icons within a grid. Whats strange is that the grid virtualizes the rows, so really only 100 rows may be visible. Without this setting render time is .5 seconds. With this setting it is >30 seconds and often crashes the browser altogether. The icons in question aren't from pseudo elements, but I enabled this feature in my index.html for a targeted use in another part of the app.

Is there any way to use a pseudo class icon without enabling that, or to scope it to only affect a certain area?

Answer 1

Using data-search-pseudo-elements with the SVG/JavaScript implementation has known performance concerns, documented here:

Although you can use pseudo-elements with SVG and JS we do not recommend using this method. It does not provide as many usage options, is difficult to configure, and is the slowest method of using Font Awesome. (Painfully slow in some cases.)

At this time, there's no configuration option to limit the scope of the pseudo-elements search and replace feature.

If you're stuck using pseudo-elements but the performance with the SVG/JavaScript method is inadequate, then your best option may be to switch to the Web Fonts & CSS method.

That said, I'm curious to have a closer look at your scenario to see if there are any optimizations that could be made. Could you post a CodePen?