CSS写在HTML底部是否影响渲染？

CSS必须严格置于HTML的``内，放在``底部不仅违反规范、被浏览器直接忽略，还会因阻塞HTML解析和DOM构建而严重拖慢渲染；虽然它不支持`defer`或`async`，但可通过`media`属性条件加载、`rel="preload"`配合JS动态注入，或内联关键CSS等现代方案实现非阻塞优化，兼顾规范合规性与首屏性能——搞错位置不是小问题，而是让样式彻底失效或引发FOUC的关键陷阱。

把 放在 前行不通

不行。浏览器解析 HTML 时，遇到 会立即发起 CSS 请求，并**阻塞后续 HTML 解析和 DOM 构建**，直到该 CSS 加载并解析完成（即使它在 上方）。更关键的是：如果样式表放在 内（比如紧挨着 ），HTML 规范明确要求浏览器**必须将其忽略**——多数现代浏览器确实不加载、不应用，控制台还会报类似 Ignoring attempt to cancel a navigation 或静默丢弃的 warning。

必须在 中，但可以异步加载

规范强制要求 出现在 内，这是为了保证样式在首次渲染前就绪，避免 FOUC（Flash of Unstyled Content）。但“在 ”不等于“阻塞渲染”。可行方案是：

• 用 media="print" + JS 动态切换 media 类型，实现“非阻塞加载+延迟应用”
• 用 rel="preload" 提前拉取 CSS，再用 JS 注入
• 对非关键 CSS（如打印样式、深色模式后备），直接用 media 属性条件加载，例如

为什么不能靠 defer 或 async 控制 CSS 加载

defer 和 async 只对