chrome devtools 中无法直接查看完整渲染树，但 layers 面板最接近：打开 layers 面板后，点击某合成层，右侧 nodes 列表即为该层内实际参与渲染的可见、有样式的 dom 节点（已过滤 display: none 等）。
Chrome DevTools 里怎么看到 CSS 引入后的真实渲染树？
渲染树（Render Tree）不是 DOM 树，也不是样式规则列表，它是浏览器实际用来绘制页面的结构——只包含**可见且有样式的节点**。CSS 引入后是否生效、是否被覆盖、是否因 display: none 被剔除，全得看它。
直接打开 Elements 面板，右键任意节点 → “Show layout shift regions” 没用；那个只标出布局偏移。真要看渲染树构成，得靠 Layers 面板 + Rendering 面板组合验证：
- 在
Rendering面板中勾选Paint flashing和Layout Shift Regions，能观察重绘/重排范围，但不等于渲染树本身 - 真正接近渲染树结构的，是
Layers面板：按Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win），输入Layers打开；这里列出所有合成层，每个层对应渲染树中一个可独立绘制的子树 - 点击某一层 → 右侧显示
Paint Profiler和Nodes列表，后者就是该层内实际参与渲染的 DOM 节点（已过滤掉display: none、visibility: hidden、无样式的文本节点等）
为什么 computed 样式里看不到某些 CSS 规则？
常见现象：computed 面板里查不到你刚写的 .header { color: red; }，甚至 color 显示为 inherit 或默认值。这不是 DevTools 坏了，而是规则根本没进入渲染流程。
原因通常有三类：
立即学习“前端免费学习笔记（深入）”；
- CSS 文件未加载成功：检查 Network 面板里
.css请求状态码是否为200，有没有404或blocked:mixed-content - 选择器不匹配：比如写了
button.primary，但 HTML 是<button class="Primary"></button>（大小写敏感）；或者用了:is()但浏览器版本太低（Chrome 不支持嵌套 <code>:is()内部的伪类） - 层叠被切断：父元素设了
contain: layout或content-visibility: auto，子元素即使有样式，也可能被跳过计算——此时computed面板里对应属性会显示为not computed
getComputedStyle() 返回的值为什么和 Elements 面板不一致？
这是最容易误判的地方。getComputedStyle(el) 返回的是**最终计算值**（resolved value），而 Elements 面板的 Styles 标签页显示的是**匹配到的声明块 + 层叠顺序**。两者目的不同，不能直接比对。
典型差异场景：
-
font-size: 1.2em在 Styles 面板里原样显示，但getComputedStyle(el).fontSize返回的是像素值，比如"16.8px" - 使用了 CSS 自定义属性：
color: var(--text-primary)在 Styles 面板可见，但若--text-primary未定义或被覆盖，getComputedStyle返回的是 fallback 值或继承值，而非变量名本身 - 媒体查询未命中：Styles 面板会灰掉未生效的规则块，但
getComputedStyle完全不体现这些“死规则”，只反映当前生效结果
如何快速定位 CSS 引入后导致的强制同步布局？
强制同步布局（Forced Synchronous Layout, FSL）是性能杀手，常发生在 JS 读取布局相关属性（如 offsetHeight、getBoundingClientRect()）之后又立刻修改样式。CSS 引入本身不会触发，但引入后若存在未优化的 JS 逻辑，就容易暴露问题。
DevTools 里抓它，靠 Performance 面板 + 正确录制条件：
- 打开 Performance 面板 → 点击录制前，勾选
Enable advanced paint instrumentation（否则看不到 layout 细节） - 操作要聚焦：比如点击按钮触发某个组件渲染，而不是“随便刷一下页面”
- 录制结束后，在
Main线程火焰图里找黄色高亮的Layout块，展开看调用栈 —— 如果顶部出现getComputedStyle、offsetTop、clientWidth等，基本就是 FSL 源头 - 注意：CSS 引入后如果触发了
@keyframes动画或will-change，也可能引发隐式布局，这类会在Recalculate Style后紧跟着Layout，且没有 JS 调用栈
最常被忽略的一点：CSS 文件里带 @import 的链式加载，会导致样式计算延迟，进而让后续 JS 获取布局时更容易撞上未完成的样式解析 —— 这种情况在 Performance 面板里表现为 Recalculate Style 时间异常长，且前面卡在 Parse HTML 或 Compile script 后的空档期。
