Chrome DevTools 中通过 Elements 面板右键节点选“Show DOM properties”查 node.depth，超6需优化；body直系子元素数远超视觉区块数表明包裹层泛滥；语义标签（header/nav/main）可加速解析；Grid/Flex 用于减少DOM嵌套；禁用 display: contents；表格仅用于真实行列数据。
Chrome DevTools 里怎么看 DOM 深度是否超标
别数源码里的 <div> 层数，浏览器解析的是最终 DOM 树。打开 Elements 面板，右键任意节点 → “Show DOM properties”，查 node.depth 值：超过 6 就该停下手来检查；如果首页的 <body> 直接子元素数量远大于视觉区块数（比如只该有 3 块，却返回 8），说明包裹层泛滥。
语义标签不是“加分项”，是解析加速器
浏览器对 <header>、<nav>、<main> 的解析路径比 <div class="header"> 更短——它不用反复回溯确认层级关系，也不用为每个同级 <div> 单独做样式继承链推导。
- 把
<div class="main-header">改成<header class="main-header">，类名保留，标签换掉 -
<div class="nav-list">→<nav class="nav-list">，但注意<nav>下直接放<a>或<ul>，别再套一层<div> - 避免混用：
<section><div><h2>是错的，<h2>应该是<section>的直接子元素
Grid/Flex 不是“更酷的写法”，是删 DOM 节点的工具
三列等宽布局，老写法要三层嵌套：<div class="row"><div class="col">A</div><div class="col">B</div><div class="col">C</div></div>；新写法一层搞定：<main style="display: grid; grid-template-columns: 1fr 1fr 1fr;"><section>A</section><section>B</section><section>C</section></main>。
- Flex 适合一维排列（导航栏、按钮组），别在 Flex 容器里再套 Grid 微调——这通常说明模块切分没想清楚
- Grid 适合二维分区（仪表盘、卡片流），但必须显式声明
grid-template-rows，否则隐式轨道会触发多次重排 - 禁用
display: contents做“视觉扁平化”：它剥离可访问性树节点，IE 全系不支持，且会让getComputedStyle()返回空对象
表格布局不是“过时”，是语义误用的性能炸弹
<table> 自带隐式 IFC，但单元格内再套 <div> + flex，会触发额外 BFC 创建，导致每行都单独重排；更糟的是 table-layout: auto 会让浏览器扫描全部单元格内容才能定列宽，50 行 × 10 列的表格可能卡顿明显。
立即学习“前端免费学习笔记（深入）”；
- 仅当数据具备明确行列语义（如财务报表、课程表）时才用
<table> - 设
table-layout: fixed后，浏览器只看第一行或<col>定义，列宽秒定 - 绝对不要用
<table>实现页头/侧边栏/主内容这种页面结构——<main>+grid更轻、更快、更语义
