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

Question

Was ist der Unterschied zwischen der Verwendung von document.head und der Verwendung von document.getElementsByTagName("head")[0]? Tests, die ich durchgeführt habe, haben gezeigt, dass beide eine Millisekunde benötigen.

Ich habe auch

gesehen

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

, die mich geführt hätte, zu glauben, dass document.head schneller ist und das andere ist mehr kompatibel, Ausnahme, dass die Tests, die ich diese widerlegt hat.

Und wenn einer kompatibler ist, warum auch den anderen?

Update: Meine Tests waren falsch, wie einige darauf hingewiesen haben.

Answer 1

Mit dem || Operator wie das ist eine Form der Feature-Erkennung. Wenn der erste Wert nicht definiert ist, sendet er den letzten Wert zurück.

Also für

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

der Grund ist, dass, wenn document.head nicht zumindest der rechte Wert unterstützt wird zurückgegeben.

Wie bei Ihrem Geschwindigkeitstest ist eine Millisekunde eine lange Zeit. Ich bezweifle, dass es wirklich so lange gedauert hat. Tatsächlich habe ich dafür einen jsPerf gemacht. Es zeigt, dass die getElementsByTagName Funktion etwa 80% langsamer ist.

Answer 2

Dies ist mehr eine Bequemlichkeit Angelegenheit als eine Leistung (obwohl document.head sollte einen vernachlässigbaren Nutzen haben). Verwenden Sie, was immer Sie möchten, oder verwenden Sie eine als Fallback für die andere (wie Ihr Beispiel-Code). Der Fallback ist klug, da document.head nicht in IE 6-8 unterstützt wird.

Es ist nicht wahrscheinlich, dass getElementsByTagName bald veraltet sein wird, also ist dies kein gutes Beispiel dafür, wann es gut ist, einen Fallback bereitzustellen. Sie können sicher die ausführlichere Route alleine nutzen und Unterstützung in die Zukunft genießen.

Bessere Beispiele für diese Art von Dingen wären Ereignisse und wie sie in modernen Browsern im Vergleich zu älteren Browsern herumgereicht werden. Es ist nicht ungewöhnlich, so etwas zu sehen:

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

In diesem Fall jedoch der window.event Teil ist für Legacy-Unterstützung notwendig. Wenn das Objekt eventundefined ist, nehmen wir an, dass das Ereignis ein Mitglied auf dem Objekt window ist. Wenn Browser älter werden, hört window.event auf eine Sache zu sein, und diese Tests geben einstimmig stattdessen event.target.id zurück.

Wieder ist Ihr Fall ein bisschen anders, da getElementsByTagName wahrscheinlich nie veraltet oder verschwinden wird, wie window.event tat.

Answer 3

Nach MDN, document.head nur gewonnen Unterstützung in IE 9, so die andere Methode verwendet als Ausweich Sie schützt vor Browser

Answer 4

Nur Bequemlichkeit Inkompatibilitäten, weil Sie nur eine pro Seite haben sollen. Genauso wie es eine direkte Verknüpfung zu document.body gibt, obwohl document.body Standard ist und Sie das Fallback nicht benötigen würden.

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

Ich würde document.head nicht verwenden, außer Sie IE9 + nur unterstützen. Bis dahin würde ich bleibe document.getElementsByTagName("head")[0]

Wenn Sie eine Version möchten, die Sie müssen nicht wie die Zeit vergeht ändern, können Sie die folgenden am Anfang des Skripts tun

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

Auf diese Weise Sie können nur diesen einen Ort ändern, wenn Sie die Unterstützung für IE8 abbrechen (oder es sogar dort lassen, da es nicht wehtut, aber es wird ein toter Code sein).Der obige Code würde auch sicherstellen, dass Sie nur das DOM einmal abfragen