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

Question

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

有没有办法在不启用此功能的情况下使用伪类图标，或者将其限制只影响特定区域？

- Josh

---

我有点困惑，你是在使用替换所有 fa-icon 元素为内联 SVG 的方法吗？这很可能会导致减速。请提供一些示例代码。 - zero298

我正在使用带下面脚本标签的新SVG + JS框架。我们需要使用SVG，因为我们必须兼容屏幕阅读器，并且对于此，字体图标会被反对。<script defer src="https://use.fontawesome.com/releases/5.1.0/js/all.js"></script> 使用SVG框架，图标可以正常工作，没有减速，直到我启用了data-search-pseudo-elements。只是想知道是否有一种方法来限定要搜索哪些html，这样我就可以在需要的地方启用它，而不是整个网站。 - Josh

Answer 1

使用data-search-pseudo-elements与SVG / JavaScript实现存在已知的性能问题，此处有记录:

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

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

如果您被困在使用伪元素中，但SVG / JavaScript方法的性能不足，则您最好的选择可能是切换到Web Fonts＆CSS方法。

话虽如此，我很想更仔细地查看您的情况，看看是否有任何可以进行的优化。您能发布一个CodePen吗？

- mwilkerson

---

我最终只是为此目的切换到了Unicode图标。不幸的是，设置Codepen太过繁琐。在我的场景中，我将树形数据提供给ag-grid实例，并向每一行添加FA图标。然后我在网格列菜单中点击“展开全部”。对于1000+元素树，这需要<1秒来呈现已展开的行，而启用d-s-p-e会导致浏览器崩溃。如上所述，该网格使用虚拟化技术，因此实际上只有100行被渲染，但它们都同时被转储到DOM上。 - Josh