检测字体预加载

59 阅读1分钟

一、Network(网络)面板确认

若在 Network 面板中,能看到 kai.woff2 字体文件被加载,且其“启动器(Initiator)”显示为 (预引)link preload ,则说明字体预加载已生效 。

二、检查 HTML 头部 link 标签

打开浏览器开发者工具的「Elements(元素)」面板,查看 <head> 部分,确认存在类似如下的标签(示例,实际按项目配置):

<link rel="preload" href="kai.woff2" as="font" type="font/woff2" crossorigin>

该标签存在,表明浏览器会在解析 HTML 时优先请求字体文件 。

三、检查字体加载优先级

在 Network 面板里,定位到 kai.woff2 字体文件,查看其“优先级”一栏,若显示为“高”或“Highest” ,是预加载带来的效果,说明预加载生效 。

四、性能面板分析(可选)

  1. 打开浏览器开发者工具的 Performance(性能)面板。
  2. 点击录制按钮,触发一次页面加载流程。
  3. 录制结束后,查看 kai.woff2 的加载时机,正常情况下,它应在页面渲染前后很早就被发起请求 。