html5文档树状结构规范要求：以开头触发标准模式，声明语言，置于最前；采用语义化标签合理嵌套（深度≤4层），控制子元素数量，优先使用实现树形结构并配合aria属性；严格闭合标签，删减冗余空白。
规范 HTML5 文档树状结构，核心是让浏览器能快速、准确、低开销地构建 DOM 树和渲染树。这不是靠堆 JS 逻辑，而是从文档骨架入手——结构清晰、语义明确、嵌套克制、标签合规，浏览器解析起来自然省力。
用对根声明与基本骨架
必须以 开头，且独占第一行。它强制浏览器进入标准模式（<code>document.compatMode === "CSS1Compat"），否则会退化为混杂模式，导致 flex、grid、@supports 等现代特性失效或计算异常。接着是 ，lang 属性不只影响 SEO 和语音朗读，还参与字体回退与断字规则，间接减少重排。
必须位于 之前，且 <meta charset="UTF-8"> 应放在 最前面（建议前 1024 字节内）。若编码声明滞后，浏览器可能先按 ISO-8859-1 解析，造成中文乱码、标签识别错位，甚至中断 DOM 构建。
语义化层级 + 合理嵌套
避免无意义的 <div> 套娃。用 <code><header></header>、<nav></nav>、<main></main>、<section></section>、<article></article> 等语义标签划分区域，浏览器能更早识别内容意图，辅助布局优化与无障碍解析。
嵌套深度控制在 3–4 层以内。例如导航菜单用 <nav><ul><li> <a></a>
</li></ul></nav> 即可，不必再包一层 <div class="item-wrapper">。过深嵌套会延长 DOM 构建时间，也增加 CSS 选择器匹配成本（尤其后代选择器如 <code>nav ul li a）。
单个容器子元素建议不超过 50 个。DOM 节点过多会拖慢解析与样式计算；动态插入时应分批（如每次 20 条），而非一次性 innerHTML += 拼接整棵树——后者会触发多次重排，且销毁已有事件绑定与焦点状态。
树形组件：ul/li 是首选骨架
实现目录、菜单、文件树等结构，优先采用 <ul><li></ul> 嵌套，而非 <div> 手动模拟。浏览器对 <code><ul></ul> 的父子关系有原生优化，渲染更快、重排更少，且天然支持屏幕阅读器的列表语义。
每个 <li> 需带 data-id 和（如需展开）data-expandable="true"；叶子节点不设后者。子 <ul></ul> 默认加 hidden 或 style="display:none"，避免初始渲染时全量展开、浪费资源。
配合 ARIA：外层 <ul role="tree"></ul>，每个可交互项 <li role="treeitem">，并动态维护 aria-expanded、aria-level、tabindex 等属性。这不仅提升可访问性，也让浏览器更高效地组织渲染树中的可见节点。
标签闭合与格式严谨
所有双标签必须正确配对闭合：<table> 内必须有 <code><tbody> 或 <code><thead>/<code><tfoot>；<code><th> 不得直接子于 <code><table>；<code><nav></nav>、<header></header> 等语义标签需合理包裹内容，避免孤立存在或错误嵌套。
未闭合标签（如漏写 或 ）会导致浏览器自动纠错，生成意外的 DOM 结构，使 CSS 选择器失效、定位偏移、样式错乱。可用 Chrome DevTools 的 Elements 面板右键启用 “Show DOM properties”，检查 node.depth 与 parentNode，验证实际结构是否符合预期。
删减冗余空格与注释。虽然文本节点本身轻量，但大量空白符（尤其是跨行缩进）会生成多余 #text 节点，增大 DOM 树体积；构建渲染树时，这些不可见节点虽被过滤，但仍占用解析内存与时间。
