dom树构建依赖栈结构，非线性遍历：遇开始标签压栈、结束标签弹栈、文本挂栈顶节点；错误嵌套如hello会导致被挂到下，自闭合标签不触发栈操作，不同解析器因规范差异生成dom可能不一致。
DOM树构建依赖栈结构，不是线性遍历
浏览器不会逐行扫描HTML然后“画”出一棵树，而是用一个运行时栈来管理嵌套关系。遇到 <div> 就压入新节点，遇到 <code>
浏览器渲染管线：HTML文档结构转化为DOM树的底层逻辑
小雪吖_6674
2026-06-27
777人浏览
原创
• 如果写
<div><p>hello</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div>，解析器会在 <p></p> 被错误地挂到 • 自闭合标签如
<img> 不触发压栈/弹栈，但某些解析器（如 BeautifulSoup）可能按 XML 规则处理，导致 DOM 结构不一致• 脚本阻塞时，栈停留在某个中间状态，后续标签会等脚本执行完再继续入栈
不同工具对同一HTML生成的DOM树可能不同
浏览器原生解析严格遵循 HTML5 规范，但服务端工具各有取舍：
• cheerio 默认不补全隐式标签（比如 <tr> 不自动包裹进 <code><tbody>），需启用 <code>xmlMode: false 并设置 useHtmlParser: true
• BeautifulSoup 的 html.parser 后端会模拟浏览器补全逻辑，但 lxml 更倾向 XML 语义，遇到缺失闭合标签容易报错或截断
• 所有工具对连续空白的处理策略不同：浏览器压缩换行和空格为单个空格，lxml 可能保留原始缩进，cheerio 默认丢弃开头结尾空白
• 实际抓取时，建议先用 response.text 看原始字节流，再决定是否预处理（如补 外层、转义非法字符）
meta charset 必须在 head 前半部分，否则解析会乱码
<meta charset="UTF-8"> 不是“声明编码”，而是**即时切换解析器的字节解码方式**。它必须出现在前1024字节内，且不能被注释或脚本阻塞：
• 如果放在 <script></script> 后面，前面的标签名、属性值可能已被按默认编码（ISO-8859-1）解析，导致 <div class="你好"> 中的中文变成乱码节点名<br>• Node.js 侧的 <code>jsdom 默认不模拟该行为，需手动设置 contentType: "text/html;charset=UTF-8"
• curl 或 requests 抓取时，HTTP Header 中的 Content-Type: text/html; charset=utf-8 优先级高于 HTML 内的 <meta>，但两者不一致时以 Header 为准
DOM树里没有“你写的HTML”的忠实副本
DOM 是规范驱动的运行时表示，不是源码快照：
• 连续文本节点必然合并，"a"<br>"b" 解析后只有一个 Text 节点，中间换行被丢弃
• <table> 类标签强制插入隐式父节点，哪怕源码里没写 <code><tbody>，DOM 中也一定存在<br>• 属性顺序在 DOM 中无意义，<code><div id="x" class="y"> 和 <code><div class="y" id="x"> 构建出的 <code>attributes 集合完全相同
• 所以用 innerHTML 回写时，格式、空格、属性顺序都会变——这不是 bug，是规范要求
