Document.head v. document.getElementsByTagName( "head" ) [0]

В чем разница между использованием document.head и использованием document.getElementsByTagName("head")[0]? Тесты, которые я запускал, показали, что оба они занимают миллисекунду.

Я также видел

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

который заставил бы меня поверить, что document.head быстрее, а другой более совместим, ~~, за исключением того, что тесты, которые я сделал, опровергли это.~~

И если кто-то более совместим, зачем использовать и другое?

Обновление: Мои тесты были неправильными, как указывали некоторые.

Ответ 1

Используя оператор ||, подобный этому, является формой обнаружения функции. Когда используется, если первое значение undefined, оно отправляет обратно последнее значение.

Итак, для

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

причина в том, что если document.head не поддерживается, по крайней мере, возвращается правильное значение.

Что касается теста скорости, то миллисекунда - это долгое время. Я сомневаюсь, что это заняло столько времени. Фактически, для этого я сделал jsPerf. Он показывает, что функция getElementsByTagName примерно на 80% медленнее.

Ответ 2

Согласно MDN, document.head получил поддержку только в IE 9, поэтому использование другого метода в качестве резервной копии защищает вас от несовместимости браузера

Ответ 3

Это больше подходит для удобства, чем для производительности (хотя 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.

Ответ 4

Просто удобство, потому что вы должны иметь только одну страницу. Так же, как есть прямой ярлык для document.body, хотя document.body является стандартным, и вам не понадобится резервное копирование.

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

Я бы не использовал document.head, если вы не поддерживаете только IE9+. До тех пор я бы придерживался document.getElementsByTagName("head")[0]

Если вам нужна версия, которую вам не нужно менять с течением времени, вы можете сделать следующее в верхней части script

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

Таким образом, вы можете просто изменить это место, когда вы откажетесь от поддержки IE8 (или можете даже оставить его там, так как это не повредит, но это будет мертвый код). Вышеприведенный код также удостоверился, что вы только запросите DOM один раз