字体真棒性能

Question

我正在使用 font-awesome 5.6.1 库来填充具有许多行和列的表格。对于每一行，大约有三种字体。字体通常定义为：

<a href="#" class="d-inline" title="Lock Event" onclick=lockEvent()><i class="fas fa-lock"></i></a>

然而，我注意到在屏幕上显示大约 50 个图标后性能大幅下降。正在加载的表有时最多包含 1000 行，相当于大约 3000 个图标。如果 Chrome 浏览器没有完全崩溃（仅字体），这需要大约 30 秒的时间来加载。

我正在体验 FA 库的真实表现吗？还是我做错了什么？

更新

进一步调查显示字体实际上是作为 svg 生成的。试图弄清楚为什么会发生这种情况，因为我正在指定 css 字体：

 cell1.innerHTML = `<a href="#" class="d-inline" title="Unlock Event" onclick=unlockEvent()><i class="fas fa-unlock"></i></a>`;

更新

发生的事情是我同时指向了 FA CSS 和 JS 文件。因此浏览器使用 JS 代码生成 SVG。确保你只有 CSS！

Answer 1

你如何引入 Font Awesome？如果你只是在脑海中包含：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

你将能够毫无问题地做你正在做的事情，并且它不会生成 svg。