SEO 百科

DOM 与源码的差别

本页目录

DOM 与源码的差别指两样东西，一是浏览器解析并执行脚本之后得到的树，二是服务器最初返回的 HTML 文本^[1]。做 SEO 的人要分清这两份东西，因为抓取工具先拿到的通常是源码，而引擎最终用于编入索引的是渲染后的页面^[2]。差别从哪里产生，以及怎么核对，是这一篇要讲的两件事。

两份内容的来历

源码是服务器返回的文本。MDN 对解析的说明是，浏览器把 HTML 解析成 DOM 树，解析包括标记化和树构建^[3]。

DOM 是解析后的对象树。MDN 定义，文档对象模型把文档的结构以对象的形式存在内存里，用树的形式表示文档^[1]。

两者从同一段文字出发，路径不同。源码是输入，DOM 是这一步的输出，脚本还能在解析过程中和解析之后继续改动这棵树^[1]。

第一个来源是解析器的容错。标签忘闭合或顺序错位时，浏览器会按自己的规则补全和重排，产出的结构与源码不一致^[3]。

第二个来源是脚本改写。脚本可以用 DOM 接口新增、删除或移动节点，这一层改动只存在于 DOM 里^[1]。

第三个来源是延迟加载。图像和列表内容常在滚动到附近时才请求，脚本未触发前，这些内容不在 DOM 里。

第四个来源是水合。同构页面在服务器产出 HTML，浏览器再执行一遍代码接管页面，两端算出结果不一致时，DOM 会与源码出现偏差^[4]。

引擎把渲染后的页面用于编入索引。Google 说明，Googlebot 会把网址加入渲染队列，由无头 Chromium 渲染后再解析链接，并用渲染后的 HTML 编入索引^[2]。

渲染完成以后，Googlebot 会重新解析渲染出来的链接，把新网址加入抓取队列^[2]。

爬虫看到的版本可以核对。百度提供抓取诊断，展示 Baiduspider 取得的内容，源码与预期不一致时，就能判断问题出在渲染还是别处^[5]。

第一步是关掉脚本看页面。停用 JavaScript 后刷新，看到的近似源码里的内容，缺什么一目了然。

第二步是在浏览器里查渲染后的 HTML。开发者工具里显示的 DOM 是执行后的结果，把它和查看源代码的结果对照^[1]。

第三步是核对标题与链接。<title>、rel="canonical" 和导航链接是否出现在两份内容里，需要逐项确认^[2]。

第四步是拿引擎的结果对照。用平台工具的抓取诊断查一次，比对返回的源码和渲染结果^[5]。

无。