深层嵌套（>4层）会让首屏变慢，因浏览器解析HTML需自上而下逐层创建DOM节点、匹配样式并计算布局，每多一层均增加开销，超4层易触发冗余重排，5层在低端设备可致首屏延迟20–50ms。
深层嵌套（>4层）为什么会让首屏变慢
浏览器解析 HTML 是自上而下构建 DOM 树的过程，每多一层 <div> 就多一次节点创建、样式匹配和布局计算。嵌套超过 4 层后，不仅解析耗时线性上升，还会触发更多不必要的重排（reflow）——尤其是当父级用了 <code>position: relative 或 transform，子元素继承后可能意外生成新图层。
- 5 层嵌套在低端 Android 设备上，首屏延迟常达 20–50ms；Chrome DevTools 的 “Layers” 面板里若出现大量小尺寸重叠图层，基本就是嵌套+定位滥用的信号
- 常见诱因：Vue/React 组件默认带根节点、BEM 类名强行映射嵌套层级（如
card__body__content__inner__button）、为兼容旧 CSS 框架硬加 wrapper - 检查方式：右键「检查元素」→ 查看元素路径深度；或运行
document.querySelectorAll('div div div div div').length快速统计超深节点
语义化标签替代 div 的实际边界在哪
用 <main></main>、<section></section>、<nav></nav> 等标签不只是为了 SEO 或可访问性——现代浏览器对它们做了原生优化：跳过部分样式继承链判断、减少渲染树遍历路径、支持更精准的焦点管理。
- 不是所有场景都适合替换：比如纯装饰性容器（仅用于
background或border）、需要display: contents剥离盒模型但又需保持可访问性的场景，<div> 仍是合理选择 <li> <code><article></article>和<section></section>区别很实在：<article></article>表示独立可分发内容（如博客正文、新闻条目），<section></section>表示主题分组（如“评论区”、“相关推荐”），混用会导致辅助技术误读 - 避免“语义化洁癖”：一个按钮组用
<nav></nav>包裹没问题，但把每个按钮都套<button></button>+<span></span>+<em></em>就过度了——语义在结构层，不在每个字符 - Flex 适合一维排列：导航栏、表单控件、卡片列表横向滚动区。注意
flex-wrap: wrap在移动端可能引发意外换行，建议配合min-width控制子项最小尺寸 - Grid 适合二维分区：仪表盘、响应式栅格、复杂表单布局。用
grid-template-areas定义区域比写一堆col-4类直观得多，但别在 grid 容器里再套 flex 微调——这通常说明逻辑模块该拆分，而不是靠嵌套补救 - 性能陷阱：避免
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))))配合大量子元素，Chrome 会反复 re-layout；固定列数（如1fr 2fr 1fr）更稳 - 数据量稍大（比如 50 行 × 10 列含中文文本的
<td>）时，<code>auto模式要扫描全部单元格内容才能定宽，卡顿肉眼可见；fixed下浏览器只读第一行或<col>，宽度秒定 - 注意兼容性：IE8+ 支持，但 Safari 对
<colgroup></colgroup>的width解析偶尔不准，建议用内联style="width:xxxpx"更可靠 - 别对整个页面用 table 布局——这是历史包袱。但展示纯数据表格时，
<table> 仍是语义最准、渲染最稳的选择，只要配上 <code>fixed就不拖后腿真正难的不是选哪个布局方案，而是判断什么时候该砍掉一层嵌套、什么时候该把逻辑拆成两个组件、什么时候该接受“这里就该用 table”。这些决策没有标准答案，但每次犹豫时，打开 DevTools 的 Layers 和 Rendering 面板看一眼，比查文档更快。
Flex/Grid 替代 float/inline-block 的真实收益点
Flex 和 Grid 不是“语法升级”，而是直接绕开了传统布局的计算陷阱：float 触发 BFC 需要清除、inline-block 受空白符影响、负 margin 容易失控。它们让浏览器少做一堆推导，尤其在动态内容插入时优势明显。
table-layout: fixed; 在真实表格中的生效条件
设了 table-layout: fixed 却没提速？大概率是没满足两个前提：第一行必须有明确列宽定义（<col width="200"> 或 <th style="width:200px">），且后续所有 <code><tr> 必须严格对应列数——缺一列或多一列都会退回到 <code>auto 模式。
立即学习“前端免费学习笔记（深入）”；
