<link rel="stylesheet">放在<body>里会强制重绘，因DOM已部分渲染，CSSOM就绪后只能触发重绘甚至重排，导致文字跳变、布局抖动、媒体查询失效等FOUC现象。
link rel="stylesheet" 放在 body 里会强制重绘
浏览器解析到 <link rel="stylesheet"> 时，会立即暂停 DOM 构建、发起请求、等待 CSSOM 就绪后才继续。这个机制只在 <head> 中能“干净”生效——此时 DOM 还没渲染，CSSOM 就绪后直接参与首次绘制。
一旦 <link> 写在 <body> 里，DOM 已经构建出大量节点并尝试渲染，CSS 加载完成后再注入样式，浏览器只能触发重绘（repaint）甚至重排（reflow）。典型表现包括：
- 文字先用系统字体崩出来，几百毫秒后跳成你设的
font-family -
display: flex容器里的子元素先堆成一列，再突然排成一行 -
@media (max-width: 768px)根本不生效——媒体查询依赖 CSSOM 就绪，而它来晚了
rel 属性写错或漏写会导致静默失效，间接引发重绘
rel="stylesheet" 是浏览器识别并加载 CSS 的唯一关键信号。拼错（如 rel="style"、rel="css"）或漏写，浏览器会把它当普通链接处理，既不阻塞也不解析。结果就是：页面按无样式状态渲染一次，等 JS 或其他逻辑补救时再强行注入样式——这等于手动触发一次重绘。
常见静默失败点：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
rel值大小写敏感，rel="Stylesheet"不生效 -
<link>被意外包裹在<script>或<meta>里，不是<head>的直接子元素 - 路径错误返回 404，DevTools Network 面板里看状态码是
404，但控制台不报错
多个 link 的加载顺序影响样式覆盖与重绘风险
CSS 加载是串行阻塞的：浏览器严格按 <link> 在 HTML 中出现的顺序，依次下载、解析、构建 CSSOM。后加载的 CSS 规则才能覆盖前面同选择器的声明。
顺序错乱会放大重绘概率：
- 把自定义样式
custom.css放在normalize.css前面 → 重置规则被跳过，布局行为不可控，后续样式修复可能触发多次重绘 - 非关键 CSS（如暗色主题）没用
media隔离，比如写成<link rel="stylesheet" href="dark.css">→ 它仍会同步阻塞，但又不参与首屏渲染，纯属浪费资源和增加重绘机会 - 用
@import替代<link>→ 它在<style>块内是同步阻塞且无法并行下载，比<link>更慢，更容易导致样式延迟就绪
preload as="style" 不等于自动重绘控制
<link rel="preload" as="style" href="main.css" onload="this.rel='stylesheet'"> 只提前下载 CSS 文件，并不改变重绘逻辑。真正触发重绘的是 onload 时切换 rel 值的那一瞬间。
容易忽略的关键点：
- IE 不支持
onload，必须加 fallback，否则 CSS 永远不生效 -
as="style"写成as="css"或漏写，浏览器降级为低优 fetch，预加载失效 - 字体跨域时没加
crossorigin，即使预加载了，@font-face仍因 CORS 失败 fallback，造成文本重绘
真正决定是否重绘的，从来不是“有没有加载”，而是“样式何时被浏览器正式纳入 CSSOM 并应用”。位置、rel 值、加载时机，三者缺一不可。
