Wie optimiert man die jQuery-Leistung? Zusammenfassung der Optimierungsmethoden

Wie optimiert man die Leistung von jQuery? Der folgende Artikel stellt Ihnen einige Optimierungsmethoden für jQuery vor. Ich hoffe, er ist hilfreich für Sie!

Ich habe nach Tipps zur jQuery-Leistungsoptimierung gesucht, um meine aufgeblähte dynamische Webanwendung leichter zu machen. Nachdem ich viele Artikel durchsucht hatte, beschloss ich, einige der besten und am häufigsten verwendeten Vorschläge zur Leistungsoptimierung aufzulisten. [Empfohlenes Lernen: jQuery-Video-Tutorial]

1. Vorschläge zur Optimierung der Selektorleistung

1. Immer von #idselector erben

Dies ist eine goldene Regel für jQuery-Selektoren. Der schnellste Weg, ein Element in jQuery auszuwählen, besteht darin, es anhand der ID auszuwählen.

2. Tag vor der Klasse verwenden

Der zweitschnellste Selektor in jQuery ist der Tag-Selektor (z. B. $(‘head’)), da er direkt von der nativen Javascript-Methode getElementByTagName() stammt. Daher ist es am besten, immer Tags zu verwenden, um Klassen zu ändern (und die nächstgelegene ID nicht zu vergessen).

Der Klassenselektor in jQuery ist der langsamste, da er alle DOM-Knoten im IE-Browser durchläuft. Vermeiden Sie die Verwendung von Klassenselektoren. Verwenden Sie auch keine Tags, um IDs zu ändern. 3. Unterabfragen verwenden was sich in der Art und Weise, wie es sich auf der Selektor-Engine verhält, stark von der Vorgängerversion unterscheidet. Es ersetzt das „von rechts nach links“-Modell durch ein „von links nach rechts“-Modell.

5. Verwenden Sie find() anstelle der Kontextsuche

Die Funktion find() ist tatsächlich schneller. Wenn eine Seite jedoch viele DOM-Knoten hat, dauert die Suche möglicherweise länger:

6. Verwenden Sie leistungsstarke Kettenoperationen. Die Verwendung der Kettenoperationen von jQuery ist effektiver als das Caching von Selektoren. 7. Schreiben Sie Ihre eigenen selector

Wenn Sie in Ihrem Code häufig Selektoren verwenden, erweitern Sie das $.expr[':']-Objekt von jQuery und schreiben Sie Ihren eigenen Selektor. 2. Vorschläge zum Optimieren von DOM-Operationen

Das Grundlegende Die Idee hier ist, das zu erstellen, was Sie tatsächlich im Speicher haben möchten, und dann das DOM zu aktualisieren. Dies ist keine Best Practice für jQuery, aber für gültige JavaScript-Vorgänge erforderlich. Direkte DOM-Operationen sind sehr langsam. Ändern Sie die HTML-Struktur so wenig wie möglich.

10. Obwohl jQuery keine Ausnahmen auslöst, sollten Entwickler auch Objekte prüfen.

Obwohl jQuery keine große Anzahl von Ausnahmen für Benutzer auslöst, sollten sich Entwickler nicht darauf verlassen. jQuery führt normalerweise eine Reihe nutzloser Funktionen aus, bevor festgestellt wird, ob ein Objekt vorhanden ist. Bevor Sie also eine Reihe von Verweisen auf ein Objekt vornehmen, sollten Sie zunächst prüfen, ob das Objekt existiert.

11. Verwenden Sie direkte Funktionen anstelle von äquivalenten Funktionen.

Für eine bessere Leistung sollten Sie direkte Funktionen wie .ajax() anstelle von .get() verwenden. getJSON(),.getJSON(),.getJSON(),.post(), da letztere $.ajax() aufrufen.

12. JQuery-Ergebnisse für die spätere Verwendung zwischenspeichern

Sie erhalten oft ein Javascript-Anwendungsobjekt – Sie können die Objekte, die Sie häufig auswählen, für die zukünftige Verwendung speichern

13. ) wird zum Speichern des Status verwendet. Vergessen Sie nicht, die Funktion .data() zum Speichern von Informationen zu verwenden. Meine Favoriten sind $.isFunction(), i s A r r a y() und isArray() sowie isArray() und .each().

15. Fügen Sie die Klasse „JS“ zum HTML-Block hinzu

Nachdem jQuery geladen wurde, fügen Sie zunächst eine Klasse namens „JS“ zum HTML$('HTML').addClass('JS'); hinzu Sie können CSS-Stile nur hinzufügen, wenn der Benutzer JavaScript aktiviert hat.

3. Vorschläge zur Optimierung der Event-Leistung

16. Verschieben bis (window). () ist schneller als $(document).ready(), da letzteres nicht wartet, bis alle DOM-Elemente heruntergeladen wurden. Sie sollten es testen, bevor Sie es verwenden.

17. Verwenden Sie die Ereignisdelegation

Wenn Sie viele Knoten in einem Container haben und ein Ereignis an alle Knoten binden möchten, eignet sich die Delegation sehr gut für solche Anwendungsszenarien. Mithilfe der Delegation müssen wir das Ereignis lediglich am übergeordneten Knoten binden und dann sehen, welcher untergeordnete Knoten (Zielknoten) das Ereignis ausgelöst hat. Dies ist sehr praktisch, wenn Sie eine Tabelle mit vielen Daten haben und Ereignisse auf dem td-Knoten festlegen möchten.

18. Verwenden Sie die Abkürzung für „ready event“

Wenn Sie das js-Plug-in komprimieren und jedes Byte speichern möchten, sollten Sie die Verwendung von $(document).onready() vermeiden

4. Testen Sie jQuery

19. jQuery Unit Test

Der beste Weg, JavaScript-Code zu testen, besteht darin, ihn von anderen testen zu lassen. Sie können jedoch einige automatisierte Tools wie Selenium, Funcunit, QUit, QMock verwenden, um Ihren Code (insbesondere Plug-Ins) zu testen. Ich möchte dieses Thema in einem anderen Thema diskutieren, weil es so viel zu sagen gibt.

20. Standardisieren Sie Ihren jQuery-Code

Standardisieren Sie Ihren Code häufig, um zu sehen, welche Abfrage langsamer ist, und ersetzen Sie sie. Sie können die Firebug-Konsole verwenden. Sie können auch die Verknüpfungsfunktionen von jQuery verwenden, um das Testen zu vereinfachen

5. Weitere häufige Vorschläge zur Optimierung der jQuery-Leistung

21. Verwenden Sie die neueste Version von jQuery

Die neueste Version ist oft die beste. Vergessen Sie nach einem Versionswechsel nicht, Ihren Code zu testen. Manchmal ist es nicht vollständig abwärtskompatibel.

22. Verwenden Sie HMTL5

Der neue HTML5-Standard bringt eine leichtere DOM-Struktur. Eine leichtere Struktur bedeutet, dass bei Verwendung von jQuery weniger Durchläufe erforderlich sind und die Ladeleistung besser ist. Bitte verwenden Sie daher nach Möglichkeit HTML5.

23. Wenn Sie Stile zu mehr als 15 Elementen hinzufügen möchten, fügen Sie Stil-Tags direkt zu DOM-Elementen hinzu.

Um Stile zu einigen Elementen hinzuzufügen, verwenden Sie am besten die css()-Funktion von jQuey. Wenn Sie jedoch Stile zu mehr als 15 Elementen hinzufügen, ist es effektiver, Stil-Tags direkt zum DOM hinzuzufügen. Diese Methode vermeidet die Verwendung von Hardcode im Code.

24. Vermeiden Sie das Laden von redundantem Code

Es ist eine gute Idee, Javascript-Code in verschiedenen Dateien abzulegen und sie nur bei Bedarf zu laden. Auf diese Weise laden Sie keinen unnötigen Code und keine unnötigen Selektoren. Es ist auch einfach, Code zu verwalten.

25. Komprimieren Sie in eine Haupt-JS-Datei, um die Anzahl der Downloads auf ein Minimum zu beschränken.

Wenn Sie festgelegt haben, welche Dateien geladen werden sollen, packen Sie sie in eine Datei. Verwenden Sie einige Open-Source-Tools, um dies automatisch für Sie zu erledigen, z. B. die Verwendung von Minify (integriert in Ihren Back-End-Code) oder die Verwendung von Online-Tools wie JSCompressor, YUI Compressor oder Dean Edwards JS Packer, um Dateien für Sie zu komprimieren. Mein Favorit ist JSCompressor.

26. Verwenden Sie bei Bedarf natives Javascript

Die Verwendung von jQuery ist eine großartige Sache, aber vergessen Sie nicht, dass es auch ein Framework für Javascript ist. So können Sie bei Bedarf native Javascript-Funktionen im jQuery-Code verwenden, wodurch eine bessere Leistung erzielt werden kann.

27. Laden Sie das jQuery-Framework von Google

Wenn Ihre Anwendung offiziell gestartet wird, laden Sie bitte jQuery vom Google CDN, da Benutzer den Code von der nächstgelegenen Stelle erhalten können. Auf diese Weise können Sie Serveranfragen reduzieren, und wenn der Benutzer eine andere Website besucht, die ebenfalls jQuery von Google CDN verwendet, ruft der Browser sofort den jQuery-Code aus dem Cache auf.

28, Das langsame Laden von Inhalten kann nicht nur die Ladegeschwindigkeit verbessern, sondern auch die SEO-Optimierung verbessern. Verwenden Sie Ajax zum Laden Ihrer Website, wodurch serverseitige Ladezeit gespart werden kann. Sie können mit einem allgemeinen Seitenleisten-Widget beginnen.

【Empfohlenes Lernen: jQuery-Video, Web-Front-End-Entwicklung】

Das obige ist der detaillierte Inhalt vonWie optimiert man die jQuery-Leistung? Zusammenfassung der Optimierungsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!