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