【发布时间】：2020-10-15 04:06:29
【问题描述】：
有谁知道为什么修复 FOUT 很重要？ 修复 FOUT 是否有助于提高网站性能？
【问题讨论】：
标签： performance fonts
【发布时间】：2020-10-15 04:06:29
【问题描述】：
简答
FOUT 在加载速度方面对性能没有影响（渲染时间影响很小），但会影响用户体验。
更长的答案
Flash of Unstyled Text (FOUT) 本身不会影响性能，它是网络字体性能的后果。
浏览器加载它的默认字体，然后当 webfont 加载它时，它会交换新字体。由于 Web 字体通常是相对较大的文件，这就是性能方面的来源（人们似乎下载了 10 种字体变体，增加了数百种KB 到页面大小）。
现在 FOUT / 字体交换存在一个大问题。这通常会导致布局变化，从而影响您在网站上的 Cumulative Layout Shift (CLS)。
您在这里关心的是 FOUT 的用户体验（这是 CLS 旨在部分衡量的）。
如果 FOUT 对性能（加载时间）有好处，那么页面显示速度会比在加载字体之前隐藏它时更快。
解决方案？
与任何事情一样，您可以做很多事情来缓解问题，但它们都有权衡。
一个例子（我认为目前最好的解决方案）是在初始页面加载时使用web safe font set。
然后使用 service worker 加载自定义字体并将它们存储在本地。
然后，当用户导航到新页面（如果他们立即离开则返回站点）时，您将在本地缓存字体并可以从那里提供它。
上面我把上面的东西简化了，实现起来不是一件简单的事情，但是体验平衡才是最好的表现。
如果您真的想挑战极限，您可能希望将Variable Fonts 视为support is pretty good for variable fonts，它大大减少了您需要的字体变体数量（减少到一个）。
【讨论】：
-
非常感谢您的专业且有据可查的回答，不胜感激！
-
@Sheldortheconqueror 是的，我们想在第一页加载时将字体加载到缓存中，因为我们不希望应用字体，我们使用服务工作者加载字体但不应用它。这样，可以使用
font-family: "custom-font", Century Gothic, sans-serif;回退到它拥有的字体的浏览器默认行为。最初 Century Gothic 会显示并在后台加载“自定义字体”。我们可以使用一些技巧来确保字体未被应用而是被缓存，然后在下一页加载时，我们已经在浏览器中缓存了字体，因此我们可以继续使用它。