Sechs jQuery-Best Practices für verbesserte Leistung

jQuery ist einer von das die beliebtesten JavaScript-Bibliotheken von heute. Seine API ist sehr einfach zu verwenden und führt zu einer nicht so steilen Lernkurve. Bei vielen Projekten wird jQuery-Code verwendet, anstatt das Vanilla-JavaScript direkt zu verwenden, um dynamische Funktionen zu integrieren.

Aber jQuery hat auch seine Mängel. Bei unsachgemäßer Verwendung kann es zu Leistungsproblemen kommen genau wie die Sprache, auf der sie basiert. In diesem Beitrag werden einige bewährte Methoden zur Verwendung von jQuery aufgeführt, mit denen wir Leistungsprobleme vermeiden können.

1. Faul Skripte laden, wenn nötig

Browser führen JavaScript aus, bevor sie die DOM-Struktur erstellen und die Pixel auf dem Bildschirm zeichnen, da Skripts der Seite neue Elemente hinzufügen oder das Layout oder den Stil einiger DOM-Knoten ändern können. Also bei Dem Browser werden weniger Skripts zur Verfügung gestellt, die beim Laden der Seite ausgeführt werden, wir können Reduzieren Sie die benötigte Zeit für die endgültige Erstellung und Bemalung des DOM-Baums, wonach der Benutzer sein wird die Seite sehen können.

Eine Möglichkeit, dies in jQuery zu tun, ist die Verwendung von $ .getScript zum Laden einer Skriptdatei zum Zeitpunkt ihres Bedarfs und nicht beim Laden der Seite.

$ .getScript ("scripts / gallery.js", Rückruf); 

Es ist eine Ajax-Funktion, die eine einzelne Skriptdatei abruft, wenn Sie möchten, aber die abgerufene Datei wird nicht zwischengespeichert. So aktivieren Sie das Caching für getScript Sie müssen dasselbe für alle Ajax-Anforderungen aktivieren. Verwenden Sie dazu den folgenden Code:

$ .ajaxSetup (cache: true); 

2. vermeiden $ (window) .load () wenn Ihr Skript keine Unterressourcen der Seite benötigt

Das $ (Dokument) .ready () ist äquivalent zu DOMContentLoaded (woher DOMContentLoaded ist verfügbar) und $ (window) .load () zu Belastung. Der erste wird ausgelöst, wenn das eigene DOM einer Seite geladen wird, nicht jedoch externe Assets wie Bilder und Stylesheets. Der zweite wird ausgelöst, wenn alles, aus dem eine Seite besteht, einschließlich des eigenen Inhalts und seiner Unterressourcen geladen wird.

Wenn Sie also ein Skript schreiben, das auf den Unterressourcen einer Seite basiert, z. B. das Ändern der Hintergrundfarbe von a div Dies wird durch ein externes Stylesheet gestaltet. Es ist am besten zu verwenden $ (window) .load ().

Wenn dies nicht der Fall ist, ist es besser, sich daran zu halten $ (Dokument) .ready () weil jQuery es nennt bereit Eventhandler, ob Sie verwenden $ (Dokument) .ready () oder nicht, so verwenden Sie es, wenn Sie können.

3. Verwenden Sie ablösen um Elemente aus DOM zu entfernen, die geändert werden mussten.

“Reflow” ist ein Begriff, der sich auf Layoutänderungen in einer Webseite bezieht. Wenn der Browser die Elemente einer Seite neu anordnet, um sich an ein neues Element anzupassen, an strukturelle Änderungen eines Elements anzupassen, die Lücke zu schließen, die durch ein entferntes Element zurückgelassen wurde, oder eine andere Aktion, die ein Element benötigt Layoutänderung auf der Seite. Reflow ist ein teuer Browser-Prozess.

Wir können das Nein reduzieren. von Rückläufen, die durch strukturelle Änderungen an einem Element verursacht werden, indem die Änderungen daran vorgenommen werden nach dem es aus dem Seitenfluss herausnehmen und zurücksetzen, wenn es fertig ist. Wenn Sie einer Tabelle mehrere Zeilen nacheinander hinzufügen, führt dies zu zahlreichen Rückläufen. Also ist es besser zu Nehmen Sie die Tabelle aus der DOM-Struktur heraus, fügen Sie die Zeilen hinzu und setzen Sie sie wieder in das DOM ein; Dadurch werden Rückflüsse reduziert.

jQuery's ablösen() lässt uns ein Element von der Seite entfernen, es unterscheidet sich von Löschen() weil es die mit dem Element verknüpften Daten speichert, wenn sie später zur Seite hinzugefügt werden müssen. Ein einzelnes Element kann dann wieder in die Seite eingefügt werden, wenn es geändert wurde.

4. verwenden css () Höhe oder Breite anstelle von einstellen Höhe() und Breite()

Wenn Sie die Höhe oder Breite eines Elements in jQuery festlegen, sollten Sie die css () Funktion, weil diese Werte mit eingestellt werden Höhe() und Breite() führt zu zusätzlichen Rückläufen aufgrund des Zugriffs auf einige Layout-Eigenschaften in der Funktion computeStyleTests in jQuery (getestet in der neuesten Version).

Für den Code p.höhe ("300px"); Hier sind die Rückflüsse.

Zum p.css ("height": "300px");

computeStyleTests wird verwendet, um einige Supporttests durchzuführen. Es heißt auch während bekommen die Höhe und Breite mit beide css () und Höhe Breite() , aber für Rahmen es ist nur erforderlich Höhe Breite() was möglicherweise nicht benötigt wird, also verwenden css () stattdessen.

5. Greifen Sie nicht unnötig auf Layout-Eigenschaften zu

Wenn Sie auf Layout-Eigenschaften wie Höhe, Breite, Rand usw. zugreifen, wird der Reflow auf der Seite ausgelöst. Der Grund ist, wann immer Sie den Browser nach den Layout-Eigenschaften fragen stellt sicher, dass Sie den aktualisierten Wert erhalten (falls der Wert zuvor ungültig gemacht wurde) von Neuberechnen der Werte und Anwenden von Layoutänderungen.

Egal, ob Sie jQuery oder Vanilla JavaScript verwenden, Achten Sie darauf, nicht unnötig auf Layout-Eigenschaften zuzugreifen vor allem in einer Schleife oder folglich nach Stiländerungen.

6. Verwenden Sie das Caching, wo Sie können

Einige Funktionen von jQuery verfügen über Caching-Mechanismen, die sinnvoll genutzt werden können. Ajax-Anfragen zwischenspeichern die Ressourcen, sind jedoch nicht für verfügbar Skript und Jsonp, Wenn Sie also alle Ihre Ajax-Anforderungen zwischenspeichern möchten, sollten Sie dies tun Setze es global Wie unten.

Beachten Sie auch, wenn Sie Ressourcen mit abrufen Post Es wird nicht zwischengespeichert, auch wenn Sie die Zwischenspeicherung mit dem obigen Setup aktivieren.

Wie ich schon erwähnt habe, ablösen() speichert die mit dem zu entfernenden Element verknüpften Daten im Gegensatz zu Löschen();verbergen() speichert das anfängliche CSS zwischen Anzeige Wert eines Elements vor dem Ausblenden, damit es später wiederhergestellt werden kann, ohne die Daten zu verlieren.

Fazit

Sie können sicher sein, dass Sie den effektivsten jQuery-Code für Ihre Anforderungen verwenden, indem Sie warten, bis Sie Ihren Code tatsächlich ausgeführt haben und festgestellt haben, ob ein Leistungsproblem vorliegt oder nicht. Verwenden Sie in diesem Fall die Leistungs- und Debugger-Tools für Erkennen Sie die Wurzel des Problems.

Da jQuery wie ein Cocoon für JavaScript mit zusätzlichen Funktionen für Browserkompatibilitäten und -funktionen ist, kann es schwierig sein, die Probleme ohne diese Tools zu diagnostizieren.