link标签的placement决定样式加载顺序，浏览器按DOM中出现顺序依次下载、解析和应用CSS；基础重置样式应置前、组件样式居中、主题覆盖样式置后；所有stylesheet必须置于head内紧贴title后，避免FOUC；禁止在body中写link或用@import；preload仅提前下载不改变应用顺序，需与stylesheet href完全一致；media属性影响是否阻塞渲染，关键样式不可加media；内联critical CSS+异步加载其余样式是首屏优化核心。
link 标签的 placement 决定样式加载顺序
浏览器按 <link> 在 HTML 中出现的顺序依次下载、解析和应用 CSS。只要没加 disabled 或用 JS 动态插入，顺序就由 DOM 位置决定。把基础重置样式（如 reset.css）放在最前，组件样式放中间，主题或覆盖样式放最后，是最稳妥的顺序控制方式。
常见错误是把第三方 UI 库的 CSS 放在自定义样式之后，结果导致类名冲突时自定义规则被覆盖——不是优先级问题，而是后加载的样式表里同名规则直接“赢”了前面的声明。
- 所有
<link rel="stylesheet">必须放在内，且紧贴<title></title>后（避免 FOUC） - 避免在
里写<link>：部分浏览器会阻塞渲染直到解析完，且顺序不可靠 - 不用
@import在 CSS 文件里引入其他样式：它会串行加载，且权重低于同层 link，还可能触发重排
preload + as="style" 能提前触发下载但不改变应用顺序
<link rel="preload" as="style" href="main.css"> 只是让浏览器更早发起请求，不执行解析，也不影响层叠顺序。它必须配合一个真实的 <link rel="stylesheet"> 才生效，且两个标签的 href 值要完全一致（包括大小写和路径），否则预加载会被忽略。
典型误用是只写 preload 不写 stylesheet，以为能“加速加载”，结果样式根本没应用；或者 href 写成相对路径 vs 绝对路径，导致预加载和实际加载指向不同资源。
立即学习“前端免费学习笔记（深入）”；
- preload 的
href必须与后续<link rel="stylesheet">的href字符串完全相等 - preload 不改变 CSSOM 构建时机，只是提前占位下载，真正阻塞渲染的仍是
rel="stylesheet"标签 - 不要对多个 CSS 文件都 preload：带宽竞争反而拖慢关键样式，只预加载首屏必需的 1–2 个
媒体查询属性（media）会影响是否阻塞渲染
浏览器只对 media 匹配当前环境的 <link rel="stylesheet"> 才会同步解析并阻塞渲染。比如 <link media="print" rel="stylesheet" href="print.css"> 在屏幕浏览时完全不下载，也不参与层叠计算。
这个特性常被用来做“条件加载”，但容易忽略的是：如果把关键响应式样式（如移动端断点）写成 media="(max-width: 768px)"，而用户在桌面端打开页面，那这部分 CSS 就不会加载——哪怕你本意是“默认加载+条件覆盖”。
- 关键基础样式（如盒模型、字体、颜色变量）不要加
media，确保无条件加载 - 用
media="all"显式声明可选，但非必需；空media属性等价于all - 动态切换
media值（如 JS 修改）会触发样式重计算，慎用于高频操作
内联 critical CSS + 异步加载其余样式是首屏优化核心
把首屏渲染必需的 CSS 提取出来，用 <style></style> 内联在 ，再用 <link rel="stylesheet" onload="this.onload=null;this.rel='stylesheet'"> 或 JS 动态插入非关键样式，才能真正解除阻塞。这比单纯调换 <link> 顺序更能提升 LCP。
难点不在怎么写，而在“哪些算 critical CSS”：不能靠肉眼判断，得用工具（如 critters、penthouse）基于真实 viewport 和 HTML 结构提取，否则容易漏掉伪元素、动画帧或 JS 动态添加的类。
- 内联 CSS 大小建议控制在 14KB 以内（HTTP/2 下略宽松，但超过 20KB 仍可能增加 TTFB）
- 动态加载的样式表需监听
onload并设rel="stylesheet"，否则 Chrome 会忽略加载完成事件 - 服务端渲染（SSR）场景下，critical CSS 必须和首屏 HTML 一起输出，不能依赖客户端 JS 注入
<link> 顺序，却没意识到内联 + 异步才是突破渲染瓶颈的开关。 
