漏闭合标签会触发浏览器强制隐式补全，导致DOM结构失真、FCP延迟30–80ms，并引发样式错乱与事件绑定失败。解析器依HTML标准按栈机制逆序补全，目标是生成可遍历DOM树而非还原语义，故补全后结构合法但可能违背开发者意图。
不规范的HTML尾标签省略（比如漏写 、
浏览器怎么处理漏闭合的标签
HTML 解析器不是“宽容”，而是按 HTML Living Standard 的容错算法强制修正 DOM。它靠栈机制维护打开的标签，遇到新块级元素或父级结束时才触发隐式闭合。
-
<p>text</p> <div>content</div>→ 解析器发现<div> 在 <code><p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a> <p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>内，立刻隐式闭合<p></p>，再开<div>，最终 DOM 是 <code><p>text</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <div>content</div>，而非嵌套 -
<ul> <li>item1</li> <li>item2</li> </ul>→ 第二个<li>会被视为同级，但解析器必须反复确认是否属于同一<ul></ul>，增加 token 匹配开销 -
<div><span>text</span></div>→ 交叉嵌套被重排为<div><span>text</span></div>，但中间需弹栈、重入、校验层级，比线性结构多 2–3 倍状态切换 - 一个漏闭合的
<section></section>可能让后续所有<article></article>被挂到 body 下，破坏语义层级，导致section > article规则完全失效 -
<table><tr> <td>A</td> <td>B</td> </tr></table>漏<tbody>，浏览器虽自动补上，但补的位置固定为 <code><table> 第一层子节点；若你写了 <code><table> <thead>...</thead> <tr>...</tr> </table>，那个<tr> 就会被塞进自动生成的 <code><tbody>，而非你预期的顶层 <li>实测：100 行列表中每行漏一个 <code>，Chrome 的 StyleEngine 计算耗时上升 40%，Lighthouse 的 “Avoid large layout shifts” 报警频次翻倍
el.innerHTML = '<div class="list"><div class="item">A'; → DOM 中只有 <code><div class="list"></div>，里面的<div class="item">A 因无闭合被丢弃或挂到 body 下 <li>接着 <code>el.innerHTML += '<div class="item">B</div>
漏闭合对 DOM 构建和样式计算的实际影响
DOM 节点生成阶段就已失真：漏闭合导致节点深度异常、父级关系错位，CSS 引擎必须重新遍历整棵子树做匹配，尤其当选择器含 > 或 :nth-child() 时，结果不可预测。
为什么 innerHTML += 非标片段会让问题雪上加霜
每次赋值 innerHTML 都是一次全新解析，不继承前次 DOM 状态。漏闭合的字符串喂进去，等于让解析器从零开始猜结构，错误会指数级放大。
