优化关键渲染路径 - Mirko Ciesco

tsalfa059@gmail

为什么要细化关键渲染路径
在字体出现在网页上之前，浏览器必须决定如何处理渲染路径以将具有自定义字体的文本返回给用户。

当浏览器请求 HTML 文档并获取其中包含的信息来构建页面时，关键渲染路径就开始了。


在此过程中，重要的是必须提供必要的字体，否则浏览 马耳他 WhatsApp 器虽然已经通过在屏幕上绘制布局和其他内容进行响应，但在加载外部字体之前不会插入任何文本像素！

此外，在此渲染路径中，各种浏览器的行为彼此不同。

这就是为什么网络字体会影响网站性能并使网页打开缓慢的原因。现在让我们看看为网站选择字体时最常见的一些问题。

加载网络字体时出现问题
网络字体可能会导致网站加载问题。以下两种典型情况可能会使您增加 CLS（累积布局偏移：核心 Web 生命指标之一）的价值并恶化用户体验。

输出
网站上最常遇到的加载问题是FOUT（Flash of Untitled Text）。在加载网络字体时，浏览器会提供替代字体，这也可能会在页面布局中产生导航问题。

福伊特
当浏览器将网页字体隐藏在渲染路径的管理中直至其完全下载时，就会发生FOIT （Flash of Invisible Text） 。如果这需要很长时间，页面可能会在相当长的时间内保持没有文本，并且可能会增加网站的放弃率。