优化HTML5文档结构需将DOM嵌套深度控制在6层以内，减少节点数量与空壳包裹层，用语义化标签替代冗余div，结合CSS布局和扁平化策略降低解析与渲染开销。
优化 HTML5 文档结构的嵌套深度，核心是减少浏览器解析时的节点创建、样式匹配和布局计算开销。实测表明，全局 DOM 深度超过 6 层（即从 <html> 算起的 node.depth ≥ 6），在低端安卓设备上可使首次内容绘制（FCP）延迟超 200ms；每多 100 个 DOM 节点，解析时间平均增加 20–40ms。
用 Chrome DevTools 定位过深节点
别靠经验猜，直接查真实 DOM 树：
- 打开 Elements 面板 → 右键任意节点 → “Show DOM properties” → 查看
depth值，≥ 6 就需重构 - 在 Console 运行
document.querySelectorAll('div:not([class]):not([id])').length，快速识别空壳包裹层 - 搜索
div[class]并逐个检查：无对应 CSS 规则、也无 JS 绑定的，整行删除 - 特别注意 CMS 或低代码平台导出的占位符，如
<div data-id="xxx">，只要没绑定事件，一律清理
用语义化标签替代冗余 div 堆叠
语义标签不是为了好看，而是触发浏览器预设优化路径：
- 把
<div class="header"><div class="logo"></div></div>改为<header><h1></h1></header> - 用
<main>替代多层div.wrapper > div.content > div.inner，且确保<main>全局唯一、不嵌套在<section>或<article>内 - 列表用
<ul>/<ol>，图文组合用<figure><img><figcaption>，折叠内容用<details> - 避免“为语义而语义”：按钮不用包进
<section>，<section>应包裹带标题的独立主题块
控制嵌套层级并扁平化结构
深度优先遍历下，每层嵌套都带来非线性成本增长：
立即学习“前端免费学习笔记（深入）”；
- 单个容器下子元素超过 50 个，或嵌套超 4 层（如
<div><div><div><p>），应拆分或改用 DocumentFragment 批量插入 - 三栏布局等场景，直接用
display: grid或display: flex，跳过<div class="row"><div class="col">这类 2–3 层包裹 - 列表编号若仅用于视觉效果（如 2.1.1），用 CSS
counter-reset+counters()实现，保持单层<ol>结构 - 禁用
<table>布局，尤其避免<td>内再嵌套多层<div>—— 表格样式计算本就重，嵌套后极易触发同步 Layout
警惕服务端与富文本引入的隐性嵌套
很多深度问题不在源码里，而在运行时生成：
- Next.js/Nuxt SSR 输出的 HTML 若含
data-reactroot或_next标记，需检查其父容器是否无意加深了嵌套层级 - 模板引擎自动补的空
<div class="">仍进 DOM 树，占解析时间，必须过滤 - 富文本编辑器输出的
<ol><ol><ol>超三层时，用document.querySelectorAll('ol ol ol')快速定位并扁平化 - 避免在
<ol>内直接写<div>包裹子项 ——<div>不是合法子元素，会触发解析器自动拆解，导致 DOM 断裂
