jQuery vs. document.querySelectorAll
Ich schon mehrmals gehört, dass jQuery das stärkste asset ist, wie es Abfragen und manipulieren von Elementen in der DOM: Sie können CSS verwenden von Abfragen erstellen komplexer Abfragen, das wäre sehr schwer zu tun, in regelmäßigen javascript .
Allerdings , soweit ich weiß, können Sie das gleiche Ergebnis erzielen mit document.querySelector
oder document.querySelectorAll
, die unterstützt werden Internet Explorer 8 und höher.
Die Frage ist also: warum 'Risiko' jQuery ' s overhead, wenn seine stärkste asset erreicht werden kann mit reinem JavaScript?
Ich weiß, jQuery hat mehr als nur CSS-Selektoren, zum Beispiel cross-browser AJAX, schönes event anbringen etc. Aber seine Abfragen Teil ist ein sehr großer Teil der Stärke von jQuery!
Irgendwelche Gedanken?
InformationsquelleAutor der Frage Joel_Blum | 2012-07-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
document.querySelectorAll()
hat mehrere Inkonsistenzen zwischen den Browsern und wird nicht unterstützt, bei älteren BrowsernDies wird wahrscheinlich nicht dazu führen, keine Probleme mehr, heute. Es hat eine sehr unintuitive scoping-Mechanismus und einige andere nicht so nette features. Auch mit javascript, die Sie haben eine härtere Zeit der arbeiten mit dem Ergebnis setzt dieser Abfragen, die in vielen Fällen möchten Sie vielleicht zu tun. jQuery bietet Funktionen, um auf Ihnen arbeiten, wie:filter()
find()
children()
parent()
map()
not()
und einige mehr. Nicht zu vergessen die jQuery-Fähigkeit zur Arbeit mit pseudo-class-Selektoren.Allerdings würde ich das nicht betrachten diese Dinge wie jQuery stärksten features, aber andere Dinge wie "arbeiten" auf dem dom (events, styling, animation & manipulation) in einer crossbrowser kompatibel Weg oder die ajax-Schnittstelle.
Wenn Sie möchten, dass nur die Selektor-engine von jQuery, die Sie verwenden können, die man jQuery selbst nutzt: Brutzeln diese Weise haben Sie die macht von jQuerys-Selector-engine ohne die fiesen overhead.
BEARBEITEN:
Nur für das Protokoll, ich bin ein riesiger Vanille-JavaScript-fan. Dennoch ist es eine Tatsache, dass Sie brauchen manchmal 10 Zeilen JavaScript, wo man schreiben würde 1 Zeile jQuery.
Natürlich muss man diszipliniert sein, um nicht zu schreiben, jQuery-wie diese:
Dies ist extrem schwer zu Lesen, während die letztere ist ziemlich klar:
Den entsprechenden JavaScript wäre weit komplexer dargestellt, indem der pseudocode oben:
1) Suchen Sie nach dem element, in Betracht ziehen, alle Elemente oder nur die erste.
2) Iteration über das array von Kind-Knoten, die über einige (möglicherweise geschachtelten oder rekursiven) - Schleifen und prüfen Sie die Klasse (classlist, die nicht in allen Browsern!)
3) gelten die css -
Dieser code würde mindestens zwei mal so viel Zeilen code Sie schreiben mit jQuery. Auch würden Sie haben zu prüfen, cross-browser-Probleme, die Gefährdung der schwere speed-Vorteil (abgesehen von der Zuverlässigkeit) der native code.
InformationsquelleAutor der Antwort Christoph
Wenn Sie die Optimierung Ihrer Seite für IE8 oder höher, Sie sollte sich wirklich überlegen, ob Sie brauchen, jquery oder nicht. Moderne Browser haben viele Vorteile nativ, die jquery bietet.
Wenn Sie sich für Leistung, Sie können unglaubliche performance-Vorteile (2-10 schneller) mit nativen javascript:
http://jsperf.com/jquery-vs-native-selector-and-element-style/2
Ich aus einem div-tagcloud aus jquery zu nativen javascript - (IE8+ kompatibel), die Ergebnisse sind beeindruckend. 4-mal schneller mit nur ein wenig Aufwand.
Können Sie Nicht Brauchen, Jquery bietet einen wirklich guten überblick verschaffen, welche native Methoden zu ersetzen, für die browser-version.
http://youmightnotneedjquery.com/
Anhang: Weitere speed-Vergleiche, wie die nativen Methoden konkurrieren um jquery
Array: $.inArray vs-Array.indexOf: Jquery 24% langsamer
DOM: $.leer vs-Knoten.innerHtml: Jquery 97% langsamer
DOM: $.auf vs-Knoten.addEventListener: Jquery 90% langsamer
DOM: $.finden vs-Knoten.queryselectorall: Jquery 90% langsamer
Array: $.grep-vs-Array.filter: Muttersprache 70% langsamer
DOM: $.einblenden/ausblenden von vs keine anzeigen: Jquery 85% langsamer
AJAX: $.ajax vs XMLHttpRequest: Jquery 89% langsamer
Höhe: $.outerHeight vs offsetHeight: Jquery 87% langsamer
Attr: $.attr vs setAttribute: Jquery 86% langsamer
InformationsquelleAutor der Antwort Pascalius
Zu verstehen, warum jQuery so populär ist, ist es wichtig zu verstehen, Woher wir kommen!
Über ein Jahrzehnt, top-Browser, IE6, Netscape 8 und der Firefox 1.5. Zurück in jenen Tagen, gab es wenig cross-browser-Wege zu wählen Sie ein element aus dem DOM neben
Dokument.getElementById()
.So, wenn jQuery veröffentlicht wurde zurück in 2006war es ziemlich Revolutionär. Damals, jQuery setzen den standard für, wie man leicht wählen /ändern von HTML-Elementen und die Ereignisse auslösen, denn seine Flexibilität und die browser-Unterstützung waren beispiellos.
Nun, mehr als ein Jahrzehnt später, ist eine Menge von Funktionen, die aus jQuery so populär geworden sind enthalten in der javaScript-standard:
$()
können Sie jetzt verwendenDokument.querySelectorAll()
$el.auf()
jetzt können SieEventTarget.die Methode addEventListener()
$el.toggleClass()
jetzt können Sie- Element.classList.toggle()
Diese waren nicht allgemein verfügbar sind zurück im Jahr 2005. Die Tatsache, dass Sie heute offensichtlich stellt sich die Frage, warum sollte man mit jQuery auf alle. Und in der Tat, die Menschen sind zunehmend Frage mich, ob wir sollten jQuery auf alle.
So, wenn Sie denken, Sie verstehen von JavaScript gut genug zu tun, ohne jQuery, bitte! Fühlen Sie sich nicht gezwungen, die jQuery verwenden, nur weil so viele andere es tun!
InformationsquelleAutor der Antwort John Slegers
jQuery Sizzle selector engine verwenden können
querySelectorAll
wenn es verfügbar ist. Außerdem glättet Inkonsistenzen zwischen den Browsern zu erzielen gleichmäßige Ergebnisse. Wenn Sie nicht wollen, um alle jQuery-Sie konnte einfach Brutzeln getrennt. Dies ist eine ziemlich grundlegende Rad zu erfinden.Hier einige cherry-pickings aus der Quelle, die zeigen, dass die Art von Sachen, jQuery(w/Sizzle) sortiert für Sie:
Safari quirks-Modus:
Wenn das guard scheitert es verwendet, es ist eine version von Sizzle, die nicht erweitert
querySelectorAll
. Weiter unten gibt es bestimmte Griffe für Inkonsistenzen in IE, Opera, und der Blackberry-browser.Und wenn alle Stricke reißen wird es wieder das Ergebnis
oldSizzle(query, context, extra, seed)
.InformationsquelleAutor der Antwort KGZM
Denn jQuery kann viel mehr tun, als
querySelectorAll
.Zunächst, jQuery (und Brutzeln, insbesondere), der arbeiten, die für ältere Browser wie IE7-8, keine Unterstützung für CSS2.1-3-Selektoren.
Plus, Brutzeln (das ist die selector-engine, die hinter jQuery) bietet Ihnen eine Vielzahl von erweiterten Selektor Instrumente, wie die
:selected
pseudo-Klasse, eine erweiterte:not()
- Selektor, der eine mehr komplexe syntax, wie in$("> .children")
und so weiter.Und es tut cross-Browser, einwandfrei, mit allen, jQuery (plugins und APIs).
Ja, wenn Sie denken, Sie können sich auf einfache Klassen-und id-Selektoren, jQuery ist zu viel für Sie, und Sie würden zahlen eine übertriebene pay-off. Aber wenn Sie nicht und wollen alle Vorteile von jQuery Güte, dann verwenden Sie es.
InformationsquelleAutor der Antwort MaxArt
Hier ist ein Vergleich, wenn ich will, um die gleichen attribute, z.B. ausblenden aller Elemente der Klasse "meine Klasse". Dies ist ein Grund für die Verwendung von jQuery.
jQuery:
JavaScript:
Mit jQuery bereits so beliebt, dass Sie gemacht haben sollten-Dokument.querySelector() verhält sich genau wie $(). Dokumentieren Sie stattdessen.querySelector() nur wählt den ersten passenden element, das macht es nur halbwegs nützlich.
InformationsquelleAutor der Antwort Steven
In Bezug auf die code Wartbarkeit, gibt es mehrere Gründe, mit Stock, eine weit verbreitete Bibliothek.
Einer der wichtigsten ist, dass Sie gut dokumentiert sind, und die Gemeinden haben, wie ... sagen wir ... stackexchange, wo die Hilfe mit den Bibliotheken gefunden werden können. Mit einer benutzerdefinierten Bibliothek, Sie haben den Quellcode, und vielleicht ein how-to-Dokument, es sei denn, der Programmierer(s) verbrachten mehr Zeit dokumentieren den code als zu schreiben, es ist verschwindend selten.
Schreiben Sie Ihre eigene Bibliothek könnte arbeiten für Sie , aber die Praktikantin sitzt am Nachbartisch haben möglicherweise eine einfachere Zeit bekommen Sie bis zu Geschwindigkeit, mit etwas jQuery.
Nennen es Netzwerk-Effekt, wenn Sie mögen. Dies ist nicht zu sagen, dass der code werden überlegen, in jQuery; nur, dass die knappe Natur der code macht es einfacher zu begreifen, die Allgemeine Struktur für Programmierer aller Könnensstufen, wenn auch nur, weil es die mehr funktionale code auf einmal sichtbar in die Datei, die Sie anzeigen möchten. In diesem Sinne, 5 Zeilen code ist besser als 10.
In der Summe sehe ich die Hauptvorteile von jQuery als prägnante code und Allgegenwart.
InformationsquelleAutor der Antwort Dom Day
als die offizielle Seite sagt:
"jQuery: The Write Less, Do More, JavaScript Library"
versuchen tranlate die folgenden jQuery-code, ohne jede Bibliothek
InformationsquelleAutor der Antwort simon xu
Ich denke, die wahre Antwort ist, dass jQuery wurde entwickelt, lange bevor
querySelector/querySelectorAll
wurde in allen gängigen Browsern.Erste Version von jQuery wurde in 2006. In der Tat, auch jQuery war nicht die erste, die umgesetzt werden CSS-Selektoren.
IE war der Letzte browser zu implementieren
querySelector/querySelectorAll
. Der 8. version wurde im Jahr 2009 veröffentlicht.So, jetzt DOM-Elemente-Selektoren ist nicht der stärkste Punkt von jQuery nicht mehr. Doch es hat noch eine Menge goodies in petto, wie Verknüpfungen zu ändern-element die css-und html-Inhalte, Animationen, Veranstaltungen verbindlich, ajax.
InformationsquelleAutor der Antwort Vanuan
Alte Frage, aber ein halbes Jahrzehnt später, lohnt es sich zurückzukommen. Hier bin ich nur der Erörterung der Selektor Aspekt von jQuery.
document.querySelector[All]
wird unterstützt durch alle aktuellen Browsern, bis auf den IE8, so dass die Kompatibilität ist kein Thema mehr. Ich habe auch keine performance-Probleme zu sprechen (es war ja auch langsamer alsdocument.getElementById
aber meine eigenen Tests deutet darauf hin, dass es etwas schneller).Daher, wenn es um die Manipulation eines Elements direkt, es ist vorzuziehen jQuery.
Beispiel:
ist gewaltig überlegen:
Um überhaupt etwas zu tun, von jQuery hat zu laufen, durch hundert Zeilen code (habe ich einmal verfolgt durch den code wie oben zu sehen, was jQuery war eigentlich mit ihm). Dies ist eindeutig eine Verschwendung von jedermanns Zeit.
Andere bedeutende Kosten für jQuery ist die Tatsache, dass es hüllt alles in ein neues jQuery-Objekt. Dieser Aufwand ist besonders verschwenderisch, wenn Sie brauchen, um zu packen Sie das Objekt erneut oder nutzen Sie eines der Objekt-Methoden im Umgang mit Eigenschaften, die bereits ausgesetzt, die auf das ursprüngliche element.
Wo jQuery hat einen Vorteil, jedoch ist im Umgang mit Sammlungen. Wenn die Voraussetzung ist, um set Eigenschaften von mehreren Elementen, jQuery hat eine eingebaute
each
Methode, die es erlaubt, so etwas wie dieses:Zu tun, also mit Vanilla-JavaScript benötigen würde, so etwas wie dieses:
denen einige finden entmutigend.
jQuery-Selektoren sind auch etwas anders, aber moderne Browser (ohne IE8) nicht viel nutzen.
Regel, rate ich gegen die Verwendung von jQuery für neue Projekte:
Wenn keine der oben genannten Fragen, dann tun, was Sie will. Aber jQuery ist nicht mehr so wichtig für cross-Plattform-Entwicklung, wie es zu sein, wie die moderne JavaScript-und CSS-gehen viel weiter, als Sie es gewohnt sind.
Diesem macht keine Erwähnung von anderen Funktionen von jQuery. Ich denke aber, dass auch Sie müssen einen genaueren Blick.
InformationsquelleAutor der Antwort Manngo
Ist der deal mit der $ () - Funktion macht es ein array und dann bricht es für Sie aber mit dem Dokument.querySelectorAll() macht es ein array, und Sie haben, um Sie zu brechen.
InformationsquelleAutor der Antwort Judah rogan