使用rel="preload"可提前下载关键CSS而不阻塞渲染，通过as="style"指定类型并配合onload切换rel属性实现预加载与应用，提升首屏速度。
在HTML5中，使用rel="preload"可以让浏览器提前加载关键资源（如CSS文件），从而提升页面渲染速度。与普通的样式引入方式不同，link[rel=preload]不会立即应用资源，而是优先下载，为后续使用做准备。
为什么用 rel="preload" 加载样式？
传统引入CSS的方式：
这种方式会阻塞渲染直到CSS下载并解析完成。而使用 preload 可以提前触发下载，避免延迟。
通过预加载，浏览器能在解析HTML早期就发现关键CSS，并开始下载，不会等到解析到普通 link 标签时才行动。
立即学习“前端免费学习笔记（深入）
”；
如何正确使用 rel="preload" 加载CSS
将CSS资源标记为预加载：
注意：
as="style"告诉浏览器这是一个样式表，有助于正确设置请求优先级和内容类型。
Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载但仅仅 preload 并不会应用样式。你需要再添加一个实际的 stylesheet 引用：或者更优的做法：使用 onload 动态切换，避免重复请求：这样浏览器先预加载，然后通过 JavaScript 立即将 rel 从 preload 改为 stylesheet，实现“预加载 + 应用”一体化。
预加载的优势与适用场景加快首次渲染：关键CSS尽早下载，减少白屏时间优化资源加载顺序：主动控制优先级，避免被非关键资源阻塞配合关键CSS内联使用：可预加载剩余的完整样式表，兼顾首屏与后续样式适合预加载的场景包括：主样式表、字体文件、核心组件样式等对渲染影响大的资源。
注意事项不要滥用 preload：只用于真正关键的资源，否则会抢占带宽确保as属性正确，错误的类型可能导致二次请求部分旧浏览器不支持 rel="preload"，建议结合 polyfill 或回退机制使用 Chrome DevTools 的 Network 面板观察预加载效果，确认是否提前触发基本上就这些。合理使用 rel="preload" 能有效提升页面加载体验，关键是把“下载”和“执行”分开控制，让浏览器更聪明地工作。