Flash of Unstyled Text - FOUT 会影响网站性能吗？
Does Flash of Unstyled Text - FOUT, impacts website performance?
有谁知道为什么修复 FOUT 很重要？
修复 FOUT 对网站性能有帮助吗？
简答
FOUT 对加载速度方面的性能没有影响（对渲染时间的影响很小），它确实会影响用户体验。
更长的答案
无样式文本的闪烁 (FOUT) 本身不会影响性能，它是 Web 字体性能的结果。
浏览器加载它的默认字体，然后在加载网络字体时将新字体换入。由于网络字体通常是相对较大的文件，这就是性能方面的问题（人们似乎下载了 10 种字体变体将页面大小增加数百 KB）。
现在 FOUT / font-swapping 有一个大问题。这通常会导致布局偏移，从而影响您的网站 Cumulative Layout Shift (CLS)。
您在这里对 FOUT 感到困扰的是用户体验（这是 CLS 旨在部分测量的内容）。
如果 FOUT 对性能（加载时间）有任何好处，则页面显示速度比您简单地隐藏它直到加载字体要快。
解决方案？
与任何事情一样，您可以做很多事情来缓解问题，但它们都需要权衡取舍。
一个例子（我认为这是目前最好的解决方案）是在初始页面加载时使用 web safe font set。
然后使用 Service Worker 加载自定义字体并将它们存储在本地。
然后，当用户导航到一个新页面（或者 returns 如果他们立即离开，则导航到该站点）时，您会将字体缓存在本地并可以从那里提供它。
我有over-simplified以上，实现起来不是一件简单的事情，但体验平衡是最好的表现。
如果您真的想挑战极限，您可能需要研究一下 Variable Fonts as support is pretty good for variable fonts，它会大大减少您需要的字体变体数量（减少到一个）。
有谁知道为什么修复 FOUT 很重要？ 修复 FOUT 对网站性能有帮助吗？
简答
FOUT 对加载速度方面的性能没有影响（对渲染时间的影响很小），它确实会影响用户体验。
更长的答案
无样式文本的闪烁 (FOUT) 本身不会影响性能，它是 Web 字体性能的结果。
浏览器加载它的默认字体，然后在加载网络字体时将新字体换入。由于网络字体通常是相对较大的文件，这就是性能方面的问题（人们似乎下载了 10 种字体变体将页面大小增加数百 KB）。
现在 FOUT / font-swapping 有一个大问题。这通常会导致布局偏移，从而影响您的网站 Cumulative Layout Shift (CLS)。
您在这里对 FOUT 感到困扰的是用户体验（这是 CLS 旨在部分测量的内容）。
如果 FOUT 对性能（加载时间）有任何好处，则页面显示速度比您简单地隐藏它直到加载字体要快。
解决方案？
与任何事情一样，您可以做很多事情来缓解问题，但它们都需要权衡取舍。
一个例子（我认为这是目前最好的解决方案）是在初始页面加载时使用 web safe font set。
然后使用 Service Worker 加载自定义字体并将它们存储在本地。
然后，当用户导航到一个新页面（或者 returns 如果他们立即离开，则导航到该站点）时，您会将字体缓存在本地并可以从那里提供它。
我有over-simplified以上，实现起来不是一件简单的事情，但体验平衡是最好的表现。
如果您真的想挑战极限，您可能需要研究一下 Variable Fonts as support is pretty good for variable fonts，它会大大减少您需要的字体变体数量（减少到一个）。