我正在使用 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!
最佳答案
您如何引入 Font Awesome？如果你只是在脑海中包括:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
你将能够毫无问题地做你正在做的事情，它不会生成 svg。
关于javascript - Font Awesome 性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55164958/