<link rel="stylesheet"> 必须置于<head>内，放</body>前会被忽略；它默认阻塞HTML解析和渲染，无法用defer/async控制；可通过media属性条件加载、rel="preload"+JS注入或内联关键CSS优化性能。
把 <link rel="stylesheet"> 放在 </body> 前行不通
不行。浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会立即发起 CSS 请求，并**阻塞后续 HTML 解析和 DOM 构建**，直到该 CSS 加载并解析完成（即使它在 </body> 上方）。更关键的是：如果样式表放在 <body> 内（比如紧挨着 </body>），HTML 规范明确要求浏览器**必须将其忽略**——多数现代浏览器确实不加载、不应用，控制台还会报类似 Ignoring attempt to cancel a navigation 或静默丢弃的 warning。
<link> 必须在 <head> 中，但可以异步加载
规范强制要求 <link rel="stylesheet"> 出现在 <head> 内，这是为了保证样式在首次渲染前就绪，避免 FOUC（Flash of Unstyled Content）。但“在 <head>”不等于“阻塞渲染”。可行方案是：
- 用
media="print"+ JS 动态切换 media 类型，实现“非阻塞加载+延迟应用” - 用
rel="preload"提前拉取 CSS，再用 JS 注入<link rel="stylesheet"> - 对非关键 CSS（如打印样式、深色模式后备），直接用
media属性条件加载，例如<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
为什么不能靠 defer 或 async 控制 CSS 加载
defer 和 async 只对 <script> 生效，<link> 不支持这两个属性。试图写成 <link rel="stylesheet" defer href="main.css"> 是无效的，浏览器会忽略 defer，仍按默认阻塞行为处理。真正可控的加载时机只有：
-
media属性匹配失败时，CSS 不下载（如media="screen and (min-width: 1024px)"在手机上不触发请求） -
rel="preload"+ JS 注入（需注意 CSP 策略是否允许动态创建<link>） - HTTP/2 Server Push（已逐步淘汰，不推荐依赖）
实际项目中更推荐的写法
兼顾规范、性能与可维护性，建议分层处理：
立即学习“前端免费学习笔记（深入）”；
<head>
<!-- 关键 CSS：内联或小体积，确保首屏样式 -->
<style>body { margin: 0; font-size: 16px; }</style>
<p><!-- 非关键 CSS：用 media 条件加载 -->
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="theme-dark.css" media="(prefers-color-scheme: dark)"></p><p><!-- 异步加载主样式（需配合 JS）-->
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="main.css"></noscript>
</head>注意：最后这行 <link rel="preload" ... onload="..."> 的写法依赖于浏览器对 onload 的支持（Chrome/Firefox/Edge OK，Safari ≤15.4 有兼容问题），生产环境务必加降级逻辑。
