JavaScript-ID + Klasse vs. Klassenselektor Leistung

Ich frage mich, was schneller ist, um eine Klasse von Elementen auszuwählen, die sich in einem Element mit ID befinden. Zum Beispiel lassen Sie uns sagen, dass wir eine Liste haben, ul mit id="list" und li Elemente mit class="list", dann das ist schneller (und/oder eine bessere Praxis):JavaScript-ID + Klasse vs. Klassenselektor Leistung

document.GetElementById('list').getElementsByClassName('list')

oder

document.getElementsByClassName('list')

Ich bin mir bewusst, dass die Former richtet nur Elemente innerhalb von Elementen aus, nehmen wir an, dass die Klasse für das gesamte Dokument eindeutig ist.

Quelle

2016-03-21 Maciej Krawczyk

Die erste ist wahrscheinlich schneller für einige Browser, aber es gibt nur eine Möglichkeit zu wissen: Profil es. –

Diese Frage ist nicht primär meinungsbezogen, da der Test auf Fakten beruht. – theoutlander

getElementsByClassName ist eine O (n) -Operation, da jedes Element auf die Existenz des zu prüfenden Klassennamens geprüft werden muss. Wenn der Wert n begrenzt ist, erhöht sich die Geschwindigkeit, jedoch ist der Geschwindigkeitsunterschied nur gering, da die Gesamtgeschwindigkeit des Vorgangs immer noch O (n) ist.

Dies ist ein Beispiel für eine Mikrooptimierung. Weder ist wesentlich schneller. Die Verwendung von Sub-Selektoren sollte sich auf die Seitenzusammensetzung beziehen, um Styling-Teile der Seite im Hinblick auf Geschwindigkeitsüberlegungen zu unterscheiden.

Quelle

2016-03-21 22:04:16

Es ist wahrscheinlich klug, so zu programmieren, als ob 'getElementsByClassName' * O (n) * ist, aber Browser behalten möglicherweise interne Datenstrukturen bei, die sich effektiv über die einzelnen DOM-Initialisierungen und -Updates amortisieren. – Pointy

@Pointy - Sie denken, dass der Browser über einen internen Cache mit Elementen nach Klassennamen verfügt, der beim Laden der Seite ausgefüllt und aktualisiert wird, wenn die Seite geändert wird? Haben Sie einen Link zu einem Material, das einen solchen Prozess oder Ansatz beschreibt? Ich weiß, dass die Engine von Chrome aggressiv versucht, die Leistung zu verbessern, aber ich habe noch nie gehört, dass Klassennamen hinter den Kulissen verwendet werden. –

Nun, obwohl die Leute sagen "das DOM ist langsam", behandeln moderne Browser Dinge wie das Hinzufügen/Entfernen einer Klasse von einem Elternelement, was viele implizite CSS-Aktualisierungen * wirklich * schnell verursacht. Ich bin kein Browser-Implementor, aber in einer Welt mit riesigen CSS-Regelsätzen und großen DOMs müssen sie * etwas * tun. Ich gebe jedoch zu, dass ich mich nur halbwegs rate. – Pointy

Die erste sollte die schnellste sein, da das Abrufen von Elementen nach Klassenname auf dieses Listenelement beschränkt ist. Es hängt jedoch davon ab, wie der Browser die Elemente intern indiziert.

Sie können einige Benchmarks laufen hier: http://jsperf.com/javascript-select-by-id-vs-by-class

In meinen Tests war der zweite Ansatz schneller auf Chrom und IE, aber in etwa gleich auf FF. Das bedeutet, dass Chrome- und IE-Indexelemente, die auf Klassennamen und FF basieren, meistens keine oder schlechte Arbeit leisten.

Quelle

2016-03-21 22:13:20 theoutlander

JavaScript-ID + Klasse vs. Klassenselektor Leistung

Antwort

Verwandte Themen