javascript - Font Awesome 性能

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。