link 标签引入 CSS 会阻塞渲染，浏览器暂停 HTML 解析直至 CSSOM 构建完成；应内联关键 CSS、用 media 属性延迟非关键样式、禁用 @import、优先使用 preload + onload 动态加载，并按用途拆分 CSS 文件。
link 标签引入 CSS 会阻塞渲染
浏览器遇到 时，会立即发起请求，并暂停 HTML 解析和 DOM 构建，直到 CSSOM 构建完成。这意味着即使 CSS 文件体积不大，只要它没加载完，页面就无法渲染首屏内容。
常见错误现象：DOMContentLoaded 延迟、白屏时间变长、LCP（最大内容绘制）指标恶化。
- 关键路径上避免在
中引入非首屏必需的 CSS - 对首屏用到的样式，建议内联到
中（如 critical CSS） - 非关键 CSS 可用
media属性延迟加载，例如：，浏览器不会立即下载
@import 在 CSS 文件中会引发额外网络往返
@import 写在 CSS 文件里（比如 main.css 中写了 @import "theme.css";），会导致浏览器必须先下载并解析 main.css，再发起 theme.css 请求——串行加载，无法并行。
对比： 是并行加载，多个 标签可同时发起请求。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要在 CSS 文件中用
@import引入其他样式表 - 如果必须拆分文件，统一用 HTML 中的
并行加载 - 构建工具（如 Webpack、Vite）默认不生成
@import，但手写或某些 PostCSS 插件可能意外引入，需检查产物 CSS
preload + onload 动态加载非关键 CSS
想完全解除 CSS 对渲染的阻塞，又保留外链优势（缓存、复用），可用 配合 JS 动态插入：
这样浏览器提前发起请求但不解析，等 onload 触发后才应用，不影响初始渲染流。
-
onload回调只在 Chrome / Edge / Safari 支持，Firefox 需 fallback 到onreadystatechange - 注意：
as="style"必须指定，否则不会提升优先级，也无法触发 onload - 不适合关键 CSS；仅用于字体、动画、交互组件等明确非首屏依赖的样式
HTTP/2 和资源合并的取舍正在失效
过去为减少请求数常把多个 CSS 合并成一个，但在 HTTP/2 下多路复用使并发请求开销大幅降低，而大文件反而影响缓存命中率和首屏加载粒度。
现代做法更倾向按「用途」和「加载时机」拆分：critical.css（内联）、base.css（）、theme.css（preload + onload）、print.css（media="print"）。
- 拆分后需确保各文件无重复规则，避免样式冲突或覆盖遗漏
- Vite、Next.js 等工具默认支持基于路由的 CSS 分块，比手动合并更可控
- 注意：gzip/Brotli 压缩对小文件收益低，但过多小文件在 HTTP/1.1 下仍不利，部署前确认服务器协议版本
media="(min-width: 768px)" 的样式表，在手机端根本不会加载，但很多人误以为“只要写了 
