FontAwesome 5 SVG 图标：数据搜索伪元素导致渲染速度减慢 100 倍答案

【问题标题】：FontAwesome 5 SVG icons: data-search-pseudo-elements causes 100X slowdown in renderingFontAwesome 5 SVG 图标：数据搜索伪元素导致渲染速度减慢 100 倍
【发布时间】：2018-06-21 20:22:02
【问题描述】：

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

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

【问题讨论】：

我很困惑，您是否使用将所有fa-icon元素替换为内联SVG的方法？这很可能是放缓。请提供一些示例代码。
我正在使用新的 SVG + JS 框架和下面的脚本标签。我们需要使用 SVG，因为我们必须与屏幕阅读器兼容，并且字体图标为此不受欢迎。

标签： svg font-awesome font-awesome-5

【解决方案1】：

在 SVG/JavaScript 实现中使用 data-search-pseudo-elements 存在已知的性能问题，记录在 here：

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

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

如果您在使用伪元素时遇到问题，但 SVG/JavaScript 方法的性能不足，那么您最好的选择可能是切换到 Web Fonts & CSS 方法。

也就是说，我很想仔细看看您的方案，看看是否可以进行任何优化。可以发个 CodePen 吗？

【讨论】：

我最终只是为了这个目的切换到一个 unicode 图标。不幸的是，设置 codepen 的开销太大。在我的场景中，我将树数据提供给 ag-grid 实例并为每一行添加一个 FA 图标。从那里我单击网格列菜单中的“全部展开”。对于 1000+ 元素树，在没有 d-s-p-e 的情况下渲染展开的行需要不到 1 秒的时间，并且启用它会使浏览器崩溃。如前所述，网格使用虚拟化，因此实际上只有 100 行被渲染，但它们都同时被转储到 DOM 上。