FontAwesome 5 SVG图标:data-search-pseudo-elements导致渲染速度减慢100倍

Question

当我启用data-search-pseudo-elements时,它会导致在网格中使用图标渲染行的性能降低100倍以上.奇怪的是网格虚拟化了行,所以实际上只有100行可见.没有此设置,渲染时间为.5秒.使用此设置时,它大于30秒,并且经常会崩溃浏览器.有问题的图标不是来自伪元素,但我在index.html中启用了此功能,以便在应用的其他部分进行有针对性的使用.

是否有任何方法可以使用伪类图标而不启用它,或将其范围仅限于某个区域？

Answer 1

使用data-search-pseudo-elements与SVG / JavaScript实现具有已知的性能问题，记录在这里：

尽管您可以在 SVG 和 JS 中使用伪元素，但我们不建议使用这种方法。它没有提供尽可能多的使用选项，难以配置，并且是使用 Font Awesome 最慢的方法。（在某些情况下会非常缓慢。）

目前，没有配置选项来限制伪元素搜索和替换功能的范围。

如果您坚持使用伪元素，但SVG/JavaScript方法的性能不足，那么最好的选择可能是切换到Web 字体和 CSS方法。

也就是说，我很想仔细查看您的场景，看看是否可以进行任何优化。你能发布一个 CodePen 吗？