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