html文档结构直接影响渲染树生成，doctype缺失或错误导致怪异模式、cssom不完整；meta charset位置不当引发编码误读、dom构建中断；标签未闭合或非法嵌套使dom树失真，css选择器失效；过度嵌套增加样式计算开销并引发定位偏移。
HTML文档结构不是“写完就能跑”的静态骨架，而是浏览器构建渲染树（Render Tree）的直接输入源——结构错乱、缺失或不合法，渲染树就无法按预期生成，样式和布局必然出问题。
DOCTYPE缺失或错误会直接禁用渲染树关键能力
没有，或用了旧式声明（如HTML 4.01 DTD），浏览器进入怪异模式（<code>document.compatMode === "BackCompat"），此时CSSOM构建阶段就已阉割：flexbox、grid、@supports、甚至calc()都可能被忽略或计算为0。这不是CSS没生效，是CSSOM根本没完整生成。
- 必须放在HTML第一行，且仅此一行；大小写不敏感，但
html小写是通用实践 - 验证方式：控制台执行
document.compatMode，返回"CSS1Compat"才表示标准模式生效 - 不要混用XHTML语法（如
），现代浏览器只认<code>
中位置影响字节流解析起点
<meta charset="UTF-8">必须在靠前位置（通常前1024字节内），否则浏览器可能已按错误编码（如ISO-8859-1）解码了部分HTML，导致后续标签名识别失败（比如把<title></title>误读成乱码字符），DOM树构建中断或错位，进而让CSSOM无法正确关联节点。
- 字符编码探测发生在令牌化之前，依赖BOM、HTTP头或
<meta charset>；三者冲突时，<meta charset>优先级最低 - 若服务端响应头已设
Content-Type: text/html; charset=UTF-8，<meta charset>可省略，但建议保留作为fallback - 放在
<title></title>之后、<link>之前最稳妥，避免被JS插入的动态<meta>干扰初始解析
标签未闭合或嵌套非法导致DOM树断裂
浏览器纠错机制（如自动补全、提前闭合<nav></nav>）会让DOM树与你写的HTML不一致。结果是CSS选择器匹配不到真实节点，渲染树中对应分支缺失，样式自然失效。
<th>不能直接放在<code><table>里，必须包裹在<code><tr>→<code><thead>/<code><tbody>中 <li> <code><nav></nav>、<header></header>等语义标签必须显式闭合，不能依赖自动补全- 用Chrome DevTools → Elements → 右键节点 →
"Show DOM properties"查看node.depth和parentNode，确认实际结构是否符合预期 - 优先用语义化标签替代
<div>堆叠：<code><nav></nav>代替<div class="nav">，减少嵌套深度 <li>避免在<code><table>单元格内再套<code><div>做布局，表格有固有盒模型约束，嵌套后样式计算成本陡增 <li>用<code>devtools → Elements → 右键节点 → "Show DOM properties"查node.depth，超6层就要重构
过度嵌套使渲染树节点膨胀并拖慢样式计算
每层嵌套都新增一个DOM节点，并延长CSS继承链。超过6层后，样式计算耗时明显上升，还易触发意外重排——比如父级display: flex下，子元素position: absolute的定位基准可能因中间某层transform或will-change而偏移。
真正卡顿的地方，往往不在你写的JavaScript里，而在HTML被浏览器读到第一行时，它是否能立刻识别出这是一个结构清晰、语义明确、编码无歧义的文档——渲染树从那一刻起就开始生长，而你写的每一处结构松动，都会在最终呈现上留下不可逆的痕迹。
