阻塞渲染的css和js无法仅靠defer/async完全解放主线程：defer/async仅对script有效，可解耦js下载与执行；css阻塞需通过内联关键样式、异步加载非关键样式及媒体查询隔离来解决。
阻塞渲染的 CSS 和 JS 本身不能靠 defer 或 async 直接“解放主线程”——因为这两个属性只对 <script></script> 有效，对 <link rel="stylesheet"> 完全无效。真正能被 defer 和 async 解放的，只有 JavaScript 的执行时机；而 CSS 的阻塞问题，得靠别的策略解决。
JS 阻塞：用 defer / async 精准分流
浏览器遇到普通 <script></script> 会立刻暂停 HTML 解析、构建 DOM，并等待脚本下载+执行完毕。这是主线程被长期占用的主因。而 defer 和 async 的本质，是把“下载”和“执行”解耦，让下载不打断解析，再按需安排执行时机：
-
defer：脚本异步下载，但严格按书写顺序，在 DOM 解析完成、
DOMContentLoaded触发前执行。适合依赖 DOM 的业务逻辑（如初始化 Vue 实例、操作document.body） - async：脚本异步下载，一旦就绪立即执行（可能早于 DOM 就绪），执行顺序不可控。适合无依赖、可独立运行的脚本（如统计埋点、广告 SDK）
- 二者不能混用——
async优先级更高，defer会被忽略，容易导致 DOM 访问失败
CSS 阻塞：它不认 defer/async，但有替代方案
CSS 文件默认会阻塞渲染（render-blocking），因为浏览器必须知道样式才能安全地绘制像素。它不会像 JS 那样暂停 HTML 解析，但会延迟首次绘制（FP）、首次内容绘制（FCP）甚至最大内容绘制（LCP）。解决思路不是加属性，而是：
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
-
关键 CSS 内联：把首屏必需的样式直接写进
的<style></style>标签里，避免额外请求 -
非关键 CSS 异步加载：用
<link rel="preload" as="style" onload="this.rel=\'stylesheet\'">或动态插入<link rel="stylesheet">，让它不参与初始渲染路径 -
媒体查询隔离：对打印样式、暗色模式等非首屏样式，加上
media属性（如media="print"或media="(prefers-color-scheme: dark)"），浏览器会跳过它们的阻塞逻辑
主线程真正“全量解放”的关键不止于标签属性
即使 JS 和 CSS 都做了异步处理，主线程仍可能被长任务、同步渲染、大量重排重绘拖慢。要真正释放它，还需配合：
-
拆分长任务：把耗时 > 50ms 的同步逻辑（如大数据处理、复杂 DOM 操作）用
setTimeout、queueMicrotask或requestIdleCallback分片执行 -
图片/iframe 懒加载：用
loading="lazy"延迟非可视区资源加载，减少主线程在滚动初期的负担 -
避免内联脚本副作用：带
type="module"的内联脚本默认异步，若需操作刚解析的 DOM，应确保它出现在对应 HTML 元素之后，或监听DOMContentLoaded
一个典型优化组合示例
比如一个含统计、Vue 应用和主题样式的页面，可这样组织：
-
<link rel="stylesheet" href="critical.css">（关键 CSS，不阻塞解析但影响渲染） -
<link rel="preload" as="style" href="theme.css" onload="this.rel='stylesheet'">（非关键 CSS 异步注入） -
<script src="analytics.js" async></script>（统计脚本，不依赖 DOM） -
<script src="app.js" defer></script>（Vue 主逻辑，需 DOM 就绪且顺序确定）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
