为什么 facebook 在每个页面的页面标题中添加 id="pageTitle"？答案

【问题标题】：Why does facebook add id="pageTitle" into page title on every their page?为什么 facebook 在每个页面的页面标题中添加 id="pageTitle"？
【发布时间】：2013-05-30 08:31:15
【问题描述】：

我一直都知道，我们需要将 id 属性添加到元素中，以便对它进行一些独特的访问。标题应该只是html文档中的一个元素，所以它是一个独特的元素。

它与 javascript 和 Frames 有关吗？还是因为我们也有属性 title 并且对于某些 javascript 函数来说更容易通过 ID 找到它？

谢谢。

【问题讨论】：

会不会是为了优化？也许在他们的测试中他们发现$('#pageTitle') 比$('title') 快？
嗯.. 可能是一个原因.. 起初我更多地认为一些注入的框架（他们大量使用）可能有自己的页面标题.. 为了区分它们，他们添加了 ID跨度>

标签： javascript html title

【解决方案1】：

原因有两个：

通过标签名称 (document.getElementsByTagName) 访问任何内容总是比通过 id (document.getElementById) 访问内容要慢。这是因为 getElementByTagName 总是返回一个 LIVE nodeList（或 HTMLCollection）。这意味着它不仅必须搜索整个文档结构以查找所有标题（并返回标题集合），它还将使列表保持活动状态并在插入时更新。然而，大多数浏览器都有一种非常快速的索引 id 方法，它只会返回元素引用（即不需要保持任何更新）。
如果页面上有框架，则 document.getElementsByTagName('title') 将返回页面上所有标题的列表（即包括任何 iframe 标题），这显然不是他们想要的。然后他们必须搜索 nodeList 以找到他们正在寻找的标题。我在 jsfiddle 上做了一个简单的例子：http://jsfiddle.net/9QtZu/:
```
var titles = document.getElementsByTagName('title');
console.log(titles);
```

因此，使用 document.getElementById 可以让他们更快地访问他们所追求的主标题，同时也提高了性能。没有比赛。

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById https://developer.mozilla.org/en-US/docs/Web/API/element.getElementsByTagName

【讨论】：

相当冷静。谢谢