7

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?

Josh
  • 1,648
  • 8
  • 27
  • 58
  • I'm confused, are you using the method that replaces all `fa-icon` elements with inline SVG? that is likely the slowdown. Please put up some example code. – zero298 Jun 21 '18 at 20:46
  • I am using the new SVG + JS framework with the script tag below. We need to use SVG's because we must be screen reader compatible and font icons are frowned upon for this. The icons work fine without slowdown using the SVG framework until I enable data-search-pseudo-elements. Just wondering if there is someway to scope which html is searched through so I can enabled that exactly where I need it opposed to site wide. – Josh Jun 21 '18 at 20:52

1 Answers1

7

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?

mwilkerson
  • 1,374
  • 10
  • 12
  • I ended up just switching to a unicode icon for this purpose. Setting up a codepen is too much overhead unfortunately. In my scenario I am feeding tree data to an ag-grid instance and adding a FA icon to each row. From there I click "expand all" in the grids column menu. With 1000+ element tree this takes <1 second to render the expanded rows without d-s-p-e and crashes the browser with it enabled. As mentioned the grid uses virtualization so there are only 100 rows actually being rendered, but they are all being dumped on the DOM at the same time. – Josh Jun 21 '18 at 21:13