svg - FontAwesome 5 SVG 图标 : data-search-pseudo-elements causes 100X slowdown in rendering

Question

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

有没有办法在不启用伪类图标的情况下使用伪类图标，或者将其范围限制为仅影响特定区域？

Answer 1

在 SVG/JavaScript 实现中使用 data-search-pseudo-elements 存在已知的性能问题，记录为 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.)

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

如果您无法使用伪元素，但 SVG/JavaScript 的性能却不佳方法不充分，那么您最好的选择可能是切换到 Web Fonts & CSS方法。

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