15

usingdocument.head和 using 和有什么不一样document.getElementsByTagName("head")[0]？我运行的测试表明它们都需要大约一毫秒。

我也看过

document.head||document.getElementsByTagName("head")[0];

这会让我相信那个document.head更快，另一个更兼容，除了我所做的测试证明了这一点。

如果一个更兼容，为什么还要使用另一个呢？

更新：正如一些人指出的那样，我的测试是错误的。

4

4 回答 4

13

使用这样的||算子是特征检测的一种形式。使用时，如果第一个值未定义，则返回后一个值。

因此对于

document.head || document.getElementsByTagName("head")[0];

原因是如果document.head不支持至少返回正确的值。

至于你的速度测试，一毫秒是很长的时间。我怀疑它真的花了那么长时间。事实上，我为此做了一个jsPerf。它表明该getElementsByTagName函数大约慢了 80%。

于 2013-04-25T01:10:22.517 回答
5

根据MDN，document.head仅在 IE 9 中获得支持，因此使用其他方法作为后备可以保护您免受浏览器不兼容的影响

于 2013-04-25T01:06:50.400 回答
2

这更像是一个方便的问题而不是性能问题（尽管document.head应该有微不足道的好处）。使用您喜欢的任何一个，或者将一个用作另一个的后备（如您的示例代码所做的那样）。有后备是明智的，因为document.head在 IE 6-8 中不支持。

它不太可能getElementsByTagName很快被弃用，所以这不是一个很好的例子来说明何时提供后备是好的。您可以安全地自行使用更详细的路由，并在未来享受支持。

与旧浏览器相比，这些类型的事情的更好例子是事件，以及它们如何在现代浏览器中传递。看到这样的事情并不少见：

function callback (event) {
    var id = (event || window.event).target.id;
}

但是，在这种情况下，该window.event部分对于遗留支持是必需的。如果event对象是undefined，我们假设事件是window对象的成员。随着浏览器的成熟，window.event不再是一件事，而这些测试一致地返回event.target.id。

同样，您的情况有点不同，因为getElementsByTagName可能永远不会像window.event以前那样被弃用或消失。

于 2013-04-25T01:04:38.967 回答
1

只是方便，因为您应该每页只有一个。就像有一个直接的快捷方式一样document.body，虽然document.body是标准的，你不需要后备。

document.body || document.getElementsByTagName("body")[0]

document.head除非您只支持 IE9+，否则我不会使用。在那之前，我会坚持document.getElementsByTagName("head")[0]

如果您想要一个不需要随着时间推移而更改的版本，您可以在脚本顶部执行以下操作

document.head = document.head || document.getElementsByTagName("head")[0];

这样，当您放弃对 IE8 的支持时，您可以只更改一个位置（或者甚至可以将其留在那里，因为它不会造成伤害，但这将是死代码）。上面的代码还可以确保您只查询 DOM 一次

于 2013-04-25T01:06:59.610 回答