只有同时满足路径可访问、media属性匹配当前环境、响应头content-type为text/css的才会阻塞渲染；否则异步加载导致闪屏，验证方法是devtools network中css资源initiator列为parser。
为什么放对位置还是闪屏
不是位置错了，是浏览器根本没把它当阻塞资源处理。只有同时满足三个条件的 <link rel="stylesheet"> 才会暂停渲染：路径可访问、media 属性匹配当前环境、响应头 Content-Type 是 text/css。本地开发时 Web 服务器常返回 text/plain，或者写了 media="(min-width: 768px)" 但当前是手机视口，都会让样式变成异步加载——HTML 解析完就直接画无样式内容。
验证方法很简单：打开 DevTools → Network → 筛选 css → 看 Initiator 列是不是 parser；如果不是，说明它压根没参与阻塞链。
多个按 DOM 顺序串行加载，前一个卡住，后一个不发起
浏览器对 <link rel="stylesheet"> 是严格串行处理的：第一个没下载完、没解析完，第二个连请求都不会发。哪怕第二个 CSS 只有 2KB，也得等第一个 200KB 的文件走完完整流程。
- 不要把非关键 CSS（比如后台管理模块样式）和首屏样式混在同一个
<link>链里 - 用
media="print"或media="(min-width: 1024px)"把非首屏样式“踢出”阻塞链，但必须确认当前环境不匹配该 media 查询 - 想并行加载？拆成多个
<link>，且确保它们的media都匹配（如都用media="all"），否则仍会串行
内联关键 CSS 时
<style></style> 标签加了 media 就失去阻塞能力。哪怕你写的是 <style media="screen"></style>，浏览器也会当成异步样式处理，FOUC 照样发生。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
真正起作用的是「首屏必需且能被浏览器立即解析应用」的那部分规则，比如 .hero、.nav、@font-face 声明。常见误操作：
- 把整份
main.css复制进<style></style>，体积超 14KB，反而拖慢 HTML 解析本身 - 漏掉
font-display: swap这类影响重排的规则，字体加载延迟导致布局跳动 - 手动维护内联 CSS，上线后很快过期；建议用
critters（Vite 插件）或criticalCLI 自动生成
JS 动态插入几乎必然触发 FOUC
用 fetch() + insertRule() 或 document.createElement('link') 在 DOMContentLoaded 后插入样式，等于绕过浏览器原生阻塞机制——DOM 已渲染、首屏已绘制，再补样式就是二次重绘，用户肉眼可见“闪一下”。
真正安全的做法只有一种：把 <link> 写死在 HTML 源码里，且出现在 开始之前。如果必须动态加载（比如深色模式切换），唯一可靠方案是服务端根据请求头 Sec-CH-Prefers-Color-Scheme 或 cookie 直接返回对应版本的 HTML，而不是靠 JS 补。
容易被忽略的细节：CSS 文件里嵌了 @import，哪怕 <link> 本身没问题，@import 也会触发额外 HTTP 请求并阻塞后续规则解析——这种写法应该全部拆出来，用独立 <link> 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
