HTML中不存在“自闭合标签”概念，仅为容错写法而非标准；HTML5仅定义14个void元素（如、），禁止写/，工具链可能误判导致属性截断或DOM错乱。
HTML里没有“自闭合标签”这个东西，强行用 /> 不仅不提升性能，反而可能让解析器多干活、工具链出错、DOM结构错乱。
为什么 <img alt="怎么利用HTML自闭合标签提升解析性能" > 不是 HTML 的合法自闭合写法
HTML5 规范只定义了 14 个 void elements（空元素），比如 <img alt="怎么利用HTML自闭合标签提升解析性能" >、<input>、<meta>。它们语法上禁止出现结束标签，也禁止写 /> —— 浏览器遇到 <img src="x" alt="怎么利用HTML自闭合标签提升解析性能" > 会忽略斜杠，等价于 <img src="x" alt="怎么利用HTML自闭合标签提升解析性能" >，但这只是容错，不是标准行为。
真正风险在工具链：vue-loader、html-webpack-plugin、某些 SSR 渲染器或 XML 模式下的静态生成器（如 Jekyll 插件）会把 /> 当作标签终止信号，导致属性截断、后续内容丢失、甚至整个 DOM 嵌套偏移一级。
-
<img src="a.jpg" alt="怎么利用HTML自闭合标签提升解析性能" >✅ 安全、通用、无歧义 -
<img src="a.jpg" alt="怎么利用HTML自闭合标签提升解析性能" >⚠️ 容错可用，但构建时可能被误判，CI 流水线里突然报错就源于此 -
<img src="a.jpg" alt="怎么利用HTML自闭合标签提升解析性能" >❌ 解析器当成两个标签，第二个被丢弃，后续文本意外成为<img alt="怎么利用HTML自闭合标签提升解析性能" >的子节点
哪些标签看似能自闭合，其实必须显式闭合
<script></script>、<style></style>、<textarea></textarea>、<select></select> 都不是 void 元素，哪怕为空也必须写结束标签。漏掉 不是“少打两个字符”，而是让浏览器把后面所有 HTML 当成 JS 字符串处理，直到遇到下一个 —— 这会导致页面大面积空白或脚本失效，且控制台通常不报错。
立即学习“前端免费学习笔记（深入）”；
-
<script>console.log(1);</script>✅ 正常执行 -
<script></script>❌ 后续所有 HTML 被吞进 script 内容区，变成纯文本 -
<textarea>default</textarea>✅ 可编辑、占位正常 -
<textarea></textarea>❌ DOM 中为空，value始终是空字符串，placeholder不显示
真正影响解析性能的，是嵌套深度和纠错开销
浏览器解析器维护一个“开放标签栈”，每层嵌套都要记录父引用、计算初始样式、准备布局检查。当嵌套深度 ≥ 7 层时，Chrome Android 版会主动丢弃后续所有 HTML —— 不是卡顿，是直接截断。这不是你写的标签“闭不闭合”的问题，而是结构失控的后果。
更隐蔽的问题是自动纠错：比如漏写 ，解析器会按插入模式补全，但补出来的 DOM 结构可能和你预期完全不同。常见现象包括：document.querySelector('footer') 返回 null、CSS 的 div > p 选择器完全不生效、body.children.length 远大于视觉区块数。
- 用 DevTools 右键任意节点 → Show DOM properties 查看
depth值，≥ 7 就该重构结构 - 不要依赖“浏览器能自动修好”，它只保证渲染，不保证语义正确
<table> 内嵌 <code><div> 会放大问题：表格解析需整行预读，多层 <code><div> 极易触发同步 Layout，中断流式解析 <p>真正能提升解析性能的做法，是写合法、扁平、意图清晰的 HTML：用对语义化标签、控制嵌套深度、显式闭合所有非-void 元素。所谓“自闭合优化”，本质是混淆了 HTML 和 XHTML 的规则边界——越想走捷径，越容易掉进工具链和解析器的隐性陷阱里。</p> </div>
