通过preload提前加载关键CSS和字体资源，可显著提升页面渲染速度。首先使用<link rel="preload">在HTML解析初期加载critical.css和web字体，指定as属性避免重复下载；其次为非关键样式添加媒体查询条件实现按需加载。正确应用preload能有效减少白屏时间，但需避免滥用导致请求过多。
在网页加载过程中，CSS 文件的获取和解析会阻塞渲染，影响首屏性能。通过合理使用 preload，可以提前加载关键 CSS 资源，减少白屏时间。下面介绍如何用 CSS preload 提升样式加载性能。
什么是 preload？
preload 是一种资源提示（resource hint），通过 <link rel="preload"> 告诉浏览器提前加载当前页面需要的重要资源，比如字体、CSS、JS 等，且不会阻塞页面解析。
与普通加载方式不同，preload 会在解析 HTML 的早期阶段就开始下载资源，而不必等到 CSSOM 构建时才发现需要某个文件。
预加载关键 CSS 文件
如果你的关键样式放在外部 CSS 文件中，可以通过 preload 加速其加载：
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" href="styles/critical.css" as="style">
然后在页面中正常引入该样式表，浏览器会复用已预加载的内容：
<link rel="stylesheet" href="styles/critical.css">
注意：as="style" 明确告诉浏览器资源类型，避免重复下载。
预加载 Web 字体
Web 字体是常见的性能瓶颈。使用 preload 可避免字体延迟导致的文本闪烁（FOIT/FOUT）：
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
- 必须添加 as="font" 指定资源类型
- 加上 crossorigin 属性，即使同源也建议添加，避免匿名模式限制
- 优先使用 woff2 格式，体积更小
结合媒体查询按需加载
对于非关键样式（如打印样式或大屏样式），可以配合媒体查询预加载，避免浪费带宽：
<link rel="preload" href="print.css" as="style" media="print">
这样浏览器只会在匹配 media 条件时应用该预加载资源。
基本上就这些。正确使用 preload 能显著提升关键资源的加载优先级，缩短页面渲染等待时间。关键是精准预加载必要资源，避免滥用导致请求过多。不复杂但容易忽略。
