使用link标签预加载关键样式通过rel="preload"实现，如<link rel="preload" href="critical.css" as="style">，可提前加载首屏关键CSS避免渲染阻塞；需配合onload或JavaScript将rel由"preload"改为"stylesheet"以应用样式，建议仅对关键CSS使用并结合媒体查询优化，提升页面加载性能。
在 CSS 中，使用 link 标签预加载关键样式主要是通过 rel="preload" 属性来实现的。它的作用是告诉浏览器提前加载重要的 CSS 文件，避免渲染阻塞，提升页面加载速度。
使用 link 预加载关键 CSS
将关键的样式文件通过以下方式插入到 HTML 的 head 中：
<link rel="preload" href="critical.css" as="style">这行代码的含义是：
- rel="preload"：指示浏览器立即开始加载该资源，但不立即应用
- as="style"：明确资源类型为样式表，有助于浏览器正确设置优先级和解析方式
- href：指向你要预加载的 CSS 文件路径
配合 onload 动态应用样式
预加载不会自动应用样式，需要手动触发。通常在加载完成后，将其切换为可应用状态：
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
或者通过 JavaScript 控制：
<link id="preload-critical" rel="preload" as="style" href="critical.css"></link><script>
document.getElementById('preload-critical').rel = 'stylesheet';
</script>
这样可以确保关键 CSS 尽早加载，并在合适时机生效。
只对关键 CSS 使用预加载
建议仅对首屏渲染所需的关键样式（critical CSS）使用 preload，比如头部、按钮、字体定义等。非关键 CSS 可以正常用 link[rel=stylesheet] 异步加载或延迟加载。
- 避免预加载过多 CSS，会增加请求压力
- 结合媒体查询优化，例如屏幕样式才加载：
<link rel="preload" href="print.css" as="style" media="print">
