javascript - Google 的搜索结果页面是如何创建的？

Question

最初我想问为什么谷歌浏览器上的“检查元素”和“查看源代码”选项会为包含谷歌查询搜索结果的页面返回不同的结果，如下所示：

然后我从以下链接中了解到，当您“查看源代码”时，它会显示来自服务器的原始 HTML，而当您“检查元素”时，它会显示构建 DOM 树后获得的代码：

Chrome：检查元素与查看源 chrome：差异页面源和检查元素？ http://productforums.google.com/forum/#!topic/chrome/46KsUR20Erc

好的，我明白了 - 检查元素选项让浏览器构建 DOM 树，因此我看到每个搜索结果标题的“h3”标签；但我想知道的是，是什么创建了这个标签？如果我在结果页面上做一个简单的“查看源代码”并查找文本“h3”，我应该能够看到一些正确的东西吗？可能不完全一样但可能还有别的？

Answer 1

检查元素选项允许浏览器构建 DOM 树

不可以。浏览器从 HTML 构建一个 DOM 树。然后它会根据任何 JavaScript 的要求对其进行修改。DOM Inspector 只是为其提供了一个不同的 UI，树已经构建好了。

如果我在结果页面上做一个简单的“查看源代码”并查找文本“h3”，我应该能够看到一些正确的东西吗？

仅当它出现在 HTML 中并且不是从 Javascript 生成时。