Font Awesome 5 - 用 JS SVG 替换提高性能？

Question

我正在使用带有一组有限图标（大约 30 个）的 Font Awesome 5。 我缩小了 FA 的 javascript 版本以删除所有未使用的图标。 这使 js/all.min.js 的文件大小达到 116kb 左右。

我仍然看到主要的性能问题，我认为它们与布局/dom 垃圾有关，这可能是由于替换为 ？

关于如何提高性能的任何建议？ 还是我看错地方了？

源 HTML：

<i class="fa fa-shield"></i>

浏览器呈现 HTML：

 <svg class="svg-inline--fa fa-shield fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="shield" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
    <path fill="currentColor" d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3z">
    </path>
 </svg>
 <!-- <i class="fa fa-shield"></i> -->

任何有兴趣的网站： https : //www.lasereyeinstitute.com/

Answer 1

主要的 fontawesome css ( https://use.fontawesome.com/releases/v5.11.2/css/all.css ) 的总大小为 55.51kb 也许你可以使用那个并进行比较而不是使用 js 版本。