关键阻塞资源不消除，首屏就卡在白屏——根本原因是和同步主动中断html解析与绘制；内联关键css必须且仅限首屏真实用到的选择器（≤10kb），禁用@import以防退化为同步阻塞；defer适用于依赖dom的主逻辑，async仅用于无序独立脚本；非关键css应通过media="print"+onload延迟激活，避免fouc；验证需以devtools performance和network面板真实链路为准，重点关注parse html后是否出现长空白段。
关键阻塞资源不消除，首屏就卡在白屏——不是代码写得慢，是浏览器被你写的 <link rel="stylesheet"> 和 <script></script> 主动拦下了。
为什么内联关键 CSS 必须做，且不能靠 @import 补救
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 就暂停 DOM 构建，等 CSSOM 完成才继续；而 @import 在 CSS 文件里再拉一次 CSS，是串行、不可并行、无法被 preload 捕获的二次阻塞。实测多一个 @import 平均拖慢 FCP 300ms+。
- 内联范围只取首屏真实用到的选择器：比如
.hero、.logo、.submit-btn的尺寸、颜色、显示逻辑，别把整个main.css塞进去 - 体积控制在 ≤10KB（实测超过 1KB 就开始影响 TTFB，尤其弱网下）
- 绝对不用
@import包关键样式——它会让内联失效，退化为同步网络请求 - 构建阶段用
critters（Vite）或critical（Webpack）自动提取，但上线前必须人工验证：打开 DevTools → Elements → 检查首屏元素是否真有对应样式生效
script 标签加 defer 还是 async？看它要不要操作 DOM
defer 和 async 都解除 HTML 解析阻塞，但执行时机和顺序约束完全不同。错配会导致 document.getElementById 找不到节点、样式未就绪就执行动画、甚至脚本静默失败。
- 业务主逻辑（如初始化 Vue 实例、渲染首屏卡片列表）→ 用
defer：<script src="app.js" defer></script>，下载并行，执行在 DOM 解析完后、DOMContentLoaded前，且按书写顺序 - 无 DOM 依赖的独立脚本（如
analytics.js、广告 SDK）→ 可用async，但多个async脚本执行顺序不确定，别让它改全局状态 - 千万别留默认的
<script src="xxx.js"></script>—— 它就是白屏元凶，DevTools Network 面板 Initiator 列显示parser就是它 - 兜底放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
