FOUC的根本原因是浏览器仅在中识别并触发阻塞，若CSS放在尾部则被降级为异步加载，导致首帧无样式渲染；唯一可靠解法是将≤10KB、无media属性的关键CSS内联至顶部标签，并用critters等工具自动生成。

在 尾部引入 CSS 会直接导致 FOUC（无样式内容闪烁），因为浏览器根本不会把它当作阻塞渲染的资源——它既不参与 CSSOM 构建，也不影响首次绘制时机。

浏览器根本不等 body 里的 link

HTML 解析器只在 中扫描 并触发阻塞逻辑；一旦进入 ，所有后续 都被降级为异步加载，等 HTML 解析完、DOM 构建完、甚至首帧都画完了才开始下载 CSS。

• 即使你写了 在 前，DevTools 的 Network 面板里它的 Initiator 会显示 other 或 parser 但不是 parser + blocking 标识
• 此时 DOM 已就绪，document.readyState 可能已是 interactive 或 complete，浏览器立刻用默认样式绘制，文字、按钮、布局全“裸奔”
• 后续 CSS 下载并解析后，触发重绘甚至重排，用户肉眼可见“闪一下”或“跳一下”

为什么有人误以为“放 body 尾部能提升性能”

这个说法混淆了 JS 和 CSS 的加载语义：JS 放 尾部确实可避免阻塞 HTML 解析，但 CSS 不是执行型资源，它是渲染前提。把 CSS 放尾部，等于主动放弃对首帧样式的控制权。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• <script></script> 放尾部 → 浏览器先构建 DOM，再执行 JS → 合理
• 放尾部 → 浏览器先画无样式的页面，再补样式 → 必然 FOUC
• 某些构建工具（如旧版 Webpack）自动生成的 HTML 模板若错误地把 CSS 插入到 ，就是典型配置 bug

例外情况：只有 media="print" 等非阻塞媒体查询才允许放 body

如果明确声明 media="print"、media="(prefers-reduced-motion: reduce)" 这类与当前渲染无关的条件，浏览器会预加载但不阻塞，这种 放 是安全的——但它对你想解决的“页面闪烁”毫无帮助。

• 这类 link 的 Initiator 仍是 parser，但浏览器判定“现在不用”，所以不进阻塞链
• 真正要防 FOUC 的关键 CSS，必须满足三个条件：在 、无 media 属性、且最好内联
• 哪怕你用 rel="preload" + as="style" 放 ，也得靠 JS 手动 onload 切换 media，中间仍有空白期

最易被忽略的一点：不是“CSS 加载慢”导致闪烁，而是“浏览器压根没打算等它”。只要不在 里声明为阻塞资源，再小的 CSS 文件也会引发 FOUC。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！