document.querySelector 返回 null 的真实原因是浏览器为保障样式计算一致性，将 JS 执行挂起等待 CSSOM 就绪，此时 DOM 节点已存在但被标记为“未激活”，无法安全访问；内联 <style> 阻塞短且可控，而 <link> 触发网络请求导致阻塞不可预测，@import 更会强制串行加载恶化首屏性能。
document.querySelector 返回 null 的真实原因不是 DOM 没建好
你在 <head> 里写了个同步 <script>，调用 document.querySelector('.foo') 却返回 null，但元素明明在 HTML 里写了——这不是 DOM 解析失败，而是浏览器主动把 JS 执行挂起了，等前面的 <link rel="stylesheet"> 加载并构建完 CSSOM 才放行。
关键点在于：DOM 节点早已创建完毕，只是被标记为“未激活”，JS 引擎拿不到可安全计算样式的节点。此时哪怕你用 document.getElementById 拿到元素，调 getComputedStyle 或读 offsetHeight 仍可能返回默认值或 0。
- 只有
<script>前面有未就绪的<link rel="stylesheet">时才会触发该阻塞 -
<style>内联样式不触发网络请求，CSSOM 构建快，阻塞窗口短且可控 -
rel="preload" as="style"只提前下载，不解除执行阻塞；需配合onload动态插入或media="print"切换才能绕过
CSS 加载失败时 DOM 节点何时“激活”
CSS 文件 404 或超时（通常约 1 秒），浏览器会降级处理：将“未激活”DOM 节点转为“已激活”，允许 JS 访问和渲染继续，但样式缺失——这就是 FOUC（Flash of Unstyled Content）的来源。
这个降级行为不可控，也不触发标准事件。你无法通过 document.readyState 或 DOMContentLoaded 准确判断它是否发生，因为这两个状态只反映 DOM 和同步脚本，不反映 CSSOM 实际就绪与否。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 监听
link元素的load和error事件只能确认资源加载结果，不代表整个 CSSOM 构建完成（比如嵌套@import仍需递归加载） -
document.fonts.ready仅对字体有效，与 CSSOM 无关 - 真正可靠的观测方式是用
MutationObserver监听style或link[rel=stylesheet]的load状态变化，再结合定时轮询验证getComputedStyle是否返回非空值
@import 是 CSS 加载链式阻塞的根源
把 @import "a.css"; 写在 main.css 里，等于主动放弃并发控制权：浏览器必须先下载并解析完 main.css，才能发现 @import 规则，再发起 a.css 请求——完全串行，无法被预加载扫描器捕获。
对比 <link> 并行加载：<link href="a.css"><link href="b.css"> 可同时发起请求；而 a.css 里含 @import "b.css" 就变成 a → b 单线程延迟，首屏时间呈指数恶化。
- 所有现代构建工具（Vite、Webpack）默认不生成
@import，但 CSS-in-JS 库或手写 legacy 样式表仍可能引入 - CI 阶段可用正则扫描源码中
@import出现位置，强制报错 - 上线前用 Lighthouse 检查 “Eliminate render-blocking resources”，
@import会直接暴露为高危项
渲染树构建阶段没有“异步非阻塞重构”这种东西
标题里说的“异步非阻塞重构技术”是个误导性概念。浏览器渲染引擎在主线程上构建渲染树（Render Tree），它必须同时持有完整的 DOM 树和完整的 CSSOM 树——缺一不可。不存在“部分 CSSOM + 部分 DOM”拼凑出可渲染结构的机制。
所谓“优化”，本质是绕过阻塞点，而非重构阻塞逻辑：比如把关键 CSS 内联、用 media 属性延迟非关键样式、用 rel="preload" 提前拉取资源，但最终仍要等 CSSOM 就绪才构建渲染树。
- 试图用
requestIdleCallback或setTimeout延迟 JS 执行，并不能让渲染树提前构建——它卡在 CSSOM 上，跟 JS 无关 -
document.createElement动态插入的节点，如果样式来自尚未就绪的外部 CSS，同样处于“未激活”状态 - 最容易被忽略的是：即使你把所有 CSS 放在
<body>底部，只要前面有同步<script>，它依然会被阻塞——阻塞取决于相对顺序，不是物理位置
