Reine JS vs JQuery
Reines JavaScript wird deutlich schneller sein, wie Sie anhand dieser jsPerf-Datei sehen können, die document.getElementByClassName
gegenüber dem jQuery-Selektor pits ist . Hier sind die Ergebnisse für Chrome 25:
-
$('.class')
- 4355 Operationen pro Sekunde -
getElementsByClassName('class')
- 94636 Operationen pro Sekunde
Wie Sie sehen, ist die jQuery-Option für diese einfache Operation etwa 22-mal langsamer als das reine JavaScript-Äquivalent. Sie können leicht erkennen, warum dies der Fall ist, indem Sie die jQuery-Entwicklungsquelle auschecken, da die 'Selector-Funktion' von jQuery so allgemein ist, dass sie viele Überprüfungen durchführen muss, um zu sehen, was die Eingabe ist, bevor sie darauf reagieren kann.
Reine JS-Implementierung
Ich habe das jQuery- click
Ereignis belassen, da es so aussieht, als hätten Sie bereits eine Abhängigkeit von jQuery, so dass es keinen Sinn hat, die Art und Weise zu ändern, wie Sie Ihre Ereignisse verbinden.
$("#Button").click(function() {
var items = document.getElementsByClassName('class');
for (var i = 0; i < items.length; i++)
alert(items[i].name);
});
getElementsByClassName
Beachten Sie auch, dass ich verwendet habe getElementsByClassName
. Es ist sehr wichtig, den idealen Selector zu wählen, wenn Sie Wert auf Leistung legen. Da wir über alle Elemente mit einer bestimmten Klasse Pflege entlassen können wir sofort die andere wie getElementsByTagName
und querySelectorAll
und für die Funktion wählen, die für die Suche nach Elementen einer bestimmten Klasse gebaut wurden.
jQuery-Implementierung
Dies wäre meine Implementierung mit jQuery. Beachten Sie, dass ich das jQuery-Objekt this
(z. B. $(this)
) nicht erhalten musste, da das einfache JavaScript-Attribut in diesem Fall viel einfacher ist.
$("#Button").click(function() {
$(".class").each(function() {
alert(this.name);
});
});