浏览器边流式解析HTML边构建DOM树，分词法分析（生成Token）和语法分析（栈驱动建树）两步；遇开始标签入栈、结束标签出栈，自动容错修复不规范结构。
浏览器不是等整个 HTML 下载完才开始构建节点树的——它边流式解析边建树，只要遇到一个开始标签，就立刻创建节点并入栈。
HTML 解析器怎么把字符流变成 DOM 节点
解析分两步：先做词法分析（把文本切分成 <div>、<code>class="nav"、文本内容 这类 Token），再做语法分析（用栈决定父子关系）。比如遇到 <ul></ul> 就新建一个 ul 元素节点，压进栈；遇到 <li> 就挂到当前栈顶节点下；遇到 就把 ul 弹出。
常见错误现象：
- 不闭合标签（如
<p>一段文字</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div>嵌套内容）会被自动补全，最终 DOM 中出现 <code><p>一段文字</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>嵌套内容</div> - 错位嵌套（如
<div><p></p></div>）会触发容错调整，解析器不会报错，但 DOM 结构和预期不同 - 把
<script></script>放在
DOM 树构建过程中 script 和 link 为什么阻塞解析
因为 <script></script> 可能调用 document.write() 或直接操作 document，必须等它执行完才能确定后续 HTML 是否还有效；而 <link rel="stylesheet"> 阻塞是因样式可能影响 JS 执行结果（例如 getComputedStyle()），浏览器要确保 CSSOM 尽早可用。
使用场景：
