dom树深度超6层时，getcomputedstyle()卡顿并非函数本身慢，而是浏览器需递归遍历所有祖先节点匹配css选择器，路径随深度线性增长；实测深度从4增至8时耗时翻倍，达12层时低端安卓机单次计算卡顿超80ms。
DOM树深度超6层时，getComputedStyle()为什么会卡住
不是函数本身慢，而是浏览器要递归遍历所有祖先节点去匹配选择器。深度每+1，路径就多一层，耗时线性增长——实测从4层到8层，getComputedStyle()平均耗时翻倍；到12层，低端安卓机单次调用卡顿超80ms。
常见错误现象：body > div > div > div > .item 这类强嵌套选择器在深层DOM里匹配效率极低；用 querySelectorAll('.item') 查100个节点时，深度每+1，总耗时+12%左右。
- 用 Chrome DevTools → Elements 面板右键任意节点 → “Show DOM properties”，看
node.depth值，超过6就要警惕 - CSS选择器尽量写成
.card .title而非div div div h2—— 后者依赖结构深度，前者靠类名直取 - 避免无意义堆叠，优先用语义化标签（
section、article、nav），它们不增加渲染开销，还能缩短选择器路径
外部CSS vs 内联样式：本地大HTML文件加载为何差60倍
核心不是“样式写在哪”，而是“浏览器要不要发起额外I/O”。一个20,000条记录的本地HTML页面，外链CSS加载耗时约6秒，内联样式0.1秒完成——差距主要来自加载时间（Load Time），而非渲染时间（Render Time）。
外部CSS的额外开销：浏览器解析到 <link> 标签时，必须暂停HTML解析，发起文件系统读取请求。即使本地磁盘，也要经历查找、打开、读块、解析全过程；而内联样式直接嵌在HTML中，随DOM同步解析，零额外事务。
- 内联样式只适合静态、一次性生成的大HTML（如导出报表、离线文档），不适合需要复用/维护的站点
- 不要把整个CSS文件内容塞进
<style></style>标签——它仍会阻塞解析，且无法被缓存；真正高效的是把关键样式内联，非关键部分延迟加载 - 若必须用外部CSS，确保
<link rel="stylesheet">放在顶部，并启用 HTTP/2 多路复用或预加载（<link rel="preload" as="style">）
table-layout: fixed 失效的常见原因
table-layout: fixed 不是开关，而是契约：它要求浏览器跳过内容测量，直接按列宽渲染。但很多人只写CSS，没配 <col>，结果浏览器仍会遍历所有单元格内容算宽度，DOM构建阶段就卡住。
必须显式声明列宽，且至少有一列不能是 auto（多列 auto 会让 fixed 失效）。width="auto" 是合法值，但仅限一列使用。
- 正确写法：
<col width="120"> <col width="auto"> <col width="80px"> - 禁用在
<th> 或 <code><td> 上写 <code>width属性或style.width—— 它们不参与table-layout计算，纯属冗余 - 响应式列宽改用 CSS
@media控制<col>的width，别用 JS 动态改style - 禁用
will-change: transform在滚动容器上——现代浏览器对表格内部元素做该声明反而触发强制图层提升，增加内存开销 - 后端返回原始数组时，前端别直接
.map()渲染；先按当前offset+pageSize切片，再生成 DOM
虚拟滚动为何比优化CSS更有效
表格行数超200时，“隐藏溢出+固定高度”根本没用——DOM还在那儿，浏览器照样解析、布局、绘制。真正有效的只有虚拟滚动：只渲染视口内 ±1～2 屏的数据行，其余用占位 <tr> 填充高度。
<p>自己手写滚动监听+重渲染极易出错：滚动抖动、焦点丢失、键盘导航失效、IntersectionObserver 回退缺失。成熟方案已处理这些边界。</p>
<ul>
<li>必须预设每行高度（或用动态高度缓存），否则无法精确计算滚动偏移</li>
<li>用 <code>react-window（React）或 virtuoso（Vanilla/TS），它们内置了滚动节流、键盘支持、焦点管理
table-layout: fixed 优化过的表格，如果嵌套在 div > section > article > main > table 这种10层深结构里，getComputedStyle() 查询表头样式依然会卡顿——优化得再细，也救不了树太深。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
