Dokument.Kopf v. Dokument.getElementsByTagName("head")[0]

Was ist der Unterschied zwischen der Verwendung document.head und mit document.getElementsByTagName("head")[0]? Tests, die ich lief, zeigte, dass Sie beide in etwa einer Millisekunde.

Habe ich auch gesehen

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

hätte, führte mich zu glauben, dass document.head ist schneller und der andere ist mehr kompatibel, ~~außer, dass die tests habe ich widerlegt dies.~~

Und wenn man kompatibel ist, warum die anderen so gut?

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

Sie können auch document.querySelector("head"). Es ist nur eine Frage der Wahl.
Sie ziemlich viel kann nicht schneller als mit einer direkten Referenz. So document.head sollte schneller von einer Größenordnung, siehe jsperf.com/document-head-vs-getelementsbytagname
2019 update: bitte hört auf unnötig zu || document.getElementsByTagName("head")[0], IE8 ist schon lange tot.

InformationsquelleAutor Brian McCutchon | 2013-04-25

dom javascript

12

Mithilfe der || - Betreiber wie, dass ist eine form der feature-Erkennung. Wenn verwendet, wenn der erste Wert nicht definiert ist, sendet es zurück, letzterer Wert.

Also für
```
document.head || document.getElementsByTagName("head")[0];
```
der Grund dafür ist, dass, wenn document.head wird nicht unterstützt zumindest der richtige Wert zurückgegeben wird.

Als für Ihre Geschwindigkeit testen, eine Millisekunde ist eine lange Zeit. Ich bezweifle, dass es wirklich sooo lange gedauert. In der Tat, ich habe ein jsPerf für diese. Es zeigt, dass die getElementsByTagName Funktion ist in etwa 80% langsamer.
- Stimmen zu, dass Sie nicht die gleiche Zeit getElementsByTagName langsamer wird als die DOM der Größe erhöht. Und 1ms ist ein Zeichen, dass es war schlecht gemessen
- Ja, ich war mit console.time() im FF...
- ist gut genug für diesen Zweck, aber man müsste Messen Sie mehr als einmal zu bekommen, anständige Genauigkeit
- document.querySelector ist auch langsamer...
- Sollte nicht dokumentieren.documentElement enthalten sein?
InformationsquelleAutor Travis J
5

Laut MDN, document.head nur gewann die Unterstützung im IE 9, ist also die andere Methode als fallback schützt Sie vor browser-Inkompatibilitäten
- Aber wenn document.getElementsByTagName("head")[0] kompatibel ist, warum verwenden document.head überhaupt?
- Weil es kürzer und einfacher zu Lesen. Es gibt mehrere Möglichkeiten zur Abfrage der DOM. In einigen Fällen, die andere Weise möglicherweise veraltet. Ich glaube nicht, vermute, dass wird geschehen, in diesem Fall aber.
InformationsquelleAutor Alex.Bullard
2

Dies ist eher eine Komfort-Sache als eine Leistung (obwohl document.head sollte einen vernachlässigbaren Vorteil). Verwenden Sie was auch immer Sie mögen, oder verwenden Sie eine als Alternative zu den anderen (wie dein Beispiel-code enthält). Mit der fallback ist klug, da document.head wird nicht unterstützt in IE 6-8.

Es ist nicht wahrscheinlich, dass getElementsByTagName wird bald veraltet sein, so ist dies nicht ein großes Beispiel von, wenn es gut ist, um eine Ausweichlösung. Man könnte sicher die ausführlichere route selbst und genießen Sie support auf in die Zukunft.

Bessere Beispiele für diese Art von Dingen wäre, die Ereignisse, und wie Sie übergeben, um in modernen Browsern, im Vergleich zu älteren Browsern. Es ist nicht ungewöhnlich, um zu sehen, so etwas wie dieses:
```
function callback (event) {
    var id = (event || window.event).target.id;
}
```
In diesem Fall, obwohl, die window.event Teil ist notwendig für legacy-Unterstützung. Wenn die event Objekt ist undefined übernehmen wir für die Veranstaltung wird ein Mitglied auf die window Objekt. Als Browser Reife, window.event aufhört zu eine Sache, und diese tests einstimmig zurück event.target.id statt.

Wieder, dein Fall ist ein bisschen anders als getElementsByTagName wird wahrscheinlich nie veraltet oder werden verschwinden, weil window.event haben.
- Ich glaube nicht, dass ein ~83% Leistung Strafe ist nur eine Frage der Bequemlichkeit. jsperf.com/document-head-vs-getelementsbytagname
- auf dieser Skala ist zu vernachlässigen. Dies ist nicht die Art von preoptimization web-Entwickler benötigen, die werden sich darum kümmern, im Allgemeinen.
- Ich bin nicht einverstanden. Ich würde erwarten, dass zur Abfrage von DOM-Elementen, so schnell wie irgendwie möglich, da diese Art von operation kann passieren Tausende Male.
- Wenn Ihre Seite Abfragen für die head element tausend mal, Sie haben kein Geschäft in dieser Branche 😉 ich denke, wir können beide einig, dass zwischengespeicherte Referenzen auf DOM-Knoten ist besser als immer wieder Suche Sie. Aber die Geschwindigkeit unterscheidet sich für immer die head element ist vernachlässigbar.
- naja, ich Rede von DOM Abfragen, aber ich denke, man will nur necken Sie hier. Nur ich bin nicht einverstanden, dass die Leistungseinbußen der Zugriff auf eine Eigenschaft + Ausführung Funktion + den Zugriff auf die daraus resultierenden HTMLCollection ist vernachlässigbar im Vergleich zu einer direkten Referenz. Dieser breitet sich eine sehr falsche Botschaft.
- Wir reden über die Abfrage für die head element; nicht - Elemente im Allgemeinen. Klar zwischengespeicherten Verweise sind schneller als die wiederholte Reisen nach DOM. Bitte verwechseln Sie meine position hier, ich bin auf deiner Seite 99% der Zeit.
- Ich weiß, aber trotzdem, es gibt andere Abkürzungen, wie document.body, document.images, document.links etc. die über das gleiche Thema. Ich würde es nicht Wagen, zu empfehlen getElementsByTagName(), würde ich immer diese verwenden, um Verweise, nicht nur für die Bequemlichkeit, jeden Tag den ganzen Tag.
- Ich würde Zustimmen, dass document.images ist besser als das Crawlen der DOM für mehrere tags. Aber das ist äpfel und Orangen; wir reden über document.head, die craws der DOM (sehr kurz, da es an der Spitze) für ein element.
- nun, ich denke, dass wir die Dinge anders Aussehen, aber fair genug.
- Nicht viel anders; auch hier sind mehrere Fahrten oder einfache Fahrten für mehrere Elemente, immer die leistungsstärkste route. In diesem Fall document.head ist besser, aber nicht mehr reizvoll, weil der einen großen performance-boost (obwohl es technisch bietet einen Schub).
InformationsquelleAutor Sampson
1

Nur Bequemlichkeit, weil Sie sollen nur einen haben pro Seite. Genauso wie es eine direkte Verknüpfung zu document.body, obwohl document.body ist standard, und Sie würden nicht brauchen, das fallback.
```
document.body || document.getElementsByTagName("body")[0]
```
Ich würde es nicht verwenden document.head es sei denn, Sie nur unterstützen, IE9+. Bis dann, ich würde stick zu document.getElementsByTagName("head")[0]

Wenn Sie möchten, eine version, die Sie nicht haben, um zu ändern, wie die Zeit vergeht, die Sie tun können, die folgenden an der Spitze des Skripts
```
document.head = document.head || document.getElementsByTagName("head")[0];
```
Diese Weise können Sie nur ändern, dass ein Ort, wenn Sie die drop-support für den IE8 (oder vielleicht sogar lassen Sie es dort, da es nicht weh tut, aber es wird dead code). Der obige code würde auch sicherstellen, dass Sie nur Abfrage der DOM einmal
- Sie setzen Körper statt Kopf.
- Vielen Dank, es behoben.
- Sie nur fixiert es in einem Ort - es gibt einige andere Instanzen.
- die erste ist absichtlich, um zu zeigen das gleiche Muster kann verwendet werden, für das Dokument.Körper
- Fair genug. Ich Frage mich, ob document.head||(document.head=document.getElementsByTagName("head")[0]);wäre das nicht etwas schneller?
- schneller als was? Warum wäre das nicht schneller, als document.head = document.head || document.getElementsByTagName("head")[0]; wenn Sie Folgen Sie meinem Vorschlag, es passiert nur einmal wie auch immer, ich denke, Sie Spalten Haare, wenn Sie eine echte performance-Frage, stellen Sie eine neue ein
InformationsquelleAutor Juan Mendes

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.