Select2上具有伪元素的FontAwesome SVG + JS性能问题

Question

我实际上使用的是FontAwesome 5包，使用的是带有“数据-搜索-伪元素”选项的SVG+JS实现。

我所处的环境中，我使用"Select2“插件来显示<select>元素，该元素包含近600个选项(用于时区选择)。但是，当我尝试打开select来选择一个选项时，它需要很长时间才能打开(当使用CSS框架或禁用伪元素时不会发生这种情况)！

稍微看一下浏览器性能面板，就会发现这是由FontAwesome脚本负责的，而Select2生成的元素中没有伪元素。

有没有什么方法可以提高FontAwesome的性能，或者避免激活某些HTML元素？

Answer 1

只要您启用了data-search-pseudo-elements，Font Awesome将在做出更改时扫描DOM，查找表示应该转换为<svg>元素的图标的任何伪元素。

不幸的是，您所描述的场景是此功能的致命弱点。当有许多DOM元素时，扫描所有可能的伪元素的DOM可能会很慢。而且只要DOM发生变化，突变观察者就会导致重新扫描--这听起来就是您打开select控件时所发生的事情。

因此，在这种情况下，最好避免使用带有伪元素的SVG/JS。

虽然我不建议花更多的精力尝试一种变通方法，但如果您遇到了困难，并且出于某种原因需要继续使用SVG/JS和伪元素，那么这里有两种可能性：

1. 如果您不需要MutationObserver来监视更改，那么您可以使用Configuration API将其完全禁用。例如，将data-observe-mutations="false"添加到<script>标记。

1. 如果您确实需要MutationObserver来监视DOM中其他地方的更改，但不是在这个select控件上，那么在禁用MutationObserver on load (使用上面的代码)之后，您可以使用dom.watch() API和一个范围更窄的observeMutationsRoot参数，以编程方式在DOM的较小区域上启动它。默认情况下，在启用时，MutationObserver会扫描document.body根目录下的所有内容，但这是一种可以使其在DOM的较小区域上工作的方法。

如果您有支持伪元素的需求，特别是如果您需要在包含许多元素的DOM中支持伪元素，特别是如果DOM变化很大，那么使用CSS/Webfont技术几乎肯定是最好的选择。