FontAwesome 5 SVG图标:数据搜索伪元素导致渲染速度降低100倍 [英] FontAwesome 5 SVG icons: data-search-pseudo-elements causes 100X slowdown in rendering

问题描述

当我启用data-search-pseudo-elements时，它会导致网格中带有图标的行渲染性能降低100倍以上.奇怪的是，网格将行虚拟化，因此实际上只能看到100行.如果没有此设置，则渲染时间为0.5秒.使用此设置的时间超过30秒，并且经常使浏览器完全崩溃.有问题的图标不是来自伪元素，但是我在index.html中启用了此功能，以便在应用程序的另一部分中有针对性地使用.

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?

推荐答案

将data-search-pseudo-elements与SVG/JavaScript实现一起使用时，存在已知的性能问题，已记录在

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

尽管您可以将伪元素与SVG和JS一起使用，但我们不建议您使用此方法.它没有提供那么多的用法选项，难以配置，并且是使用Font Awesome的最慢的方法. (在某些情况下非常慢.)

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.

如果您坚持使用伪元素，但使用网络字体& CSS 方法.

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.

也就是说，我很好奇地仔细研究您的情况，看看是否可以进行任何优化.您可以发布一个CodePen吗?

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?

这篇关于FontAwesome 5 SVG图标:数据搜索伪元素导致渲染速度降低100倍的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！