So starten Sie schnell mit VUE3.0: Einstieg ins Lernen
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. Erben Sie immer vom #id Selektor
. 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. Verwenden Sie Unterabfragen,
um übergeordnete Objekte für die zukünftige Verwendung zwischenzuspeichern
. 4. Optimieren Sie Selektoren, um sie an das „Rechts-nach-links“-Modell von Sizzle anzupassen
. Seit Version 1.3 verwendet jQuery die Sizzle-Bibliothek, die mit früheren Versionen in der Selektor-Engine identisch ist Ausdrücke sind sehr unterschiedlich. Es ersetzt das „von rechts nach links“-Modell durch ein „von links nach rechts“-Modell.
5.
Es ist in der Tat schneller, find() zu verwenden, anstatt den Kontext zu verwenden, um die Funktion find() zu finden. Wenn eine Seite jedoch viele DOM-Knoten hat, dauert die Suche möglicherweise länger:
6. Die Verwendung leistungsstarker Kettenoperationen
ist effektiver als das Caching von Selektoren.
7. Schreiben Sie Ihren eigenen Selektor,
wenn Sie häufig Selektoren verwenden Erweitern Sie daher das Objekt $.expr[':'] von jQuery, um Ihre eigenen Selektoren zu schreiben.
2. Vorschläge zur Optimierung von DOM-Operationen
8. Zwischenspeichern von jQuery-Objekten und
Zwischenspeichern von Elementen,
die Sie häufig verwenden.
9. Kapseln Sie beim Einfügen in das DOM alle Elemente in einem Element
Aktualisieren Sie dann das DOM. 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 überprüfen.
Obwohl jQuery nicht viele 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.
Für eine bessere Leistung sollten Sie direkte Funktionen wie .ajax() statt .ajax() verwenden. Verwenden Sie nicht .get(), .getJSON(). .getJSON(),.getJSON(),.post(), da letztere $.ajax() aufrufen.
12. Speichern Sie die jQuery-Ergebnisse für die spätere Verwendung.
Sie können die von Ihnen häufig ausgewählten Objekte mit der App speichern.
13. Verwenden Sie die interne Funktion data(), um den Status zu
speichern Vergessen Sie nicht, die Funktion .data() zum Speichern von Informationen zu verwenden.
Vergessen Sie nicht die einfache und praktische Funktion des jQuery-Dienstprogramms
. Meine Favoriten sind $.isFunction(), isA rray() und isArray() sowie isArray() und .each().
15. Fügen Sie die Klasse „JS“ zum HTML-Block hinzu
. Fügen Sie nach dem Laden von jQuery zunächst eine Klasse namens „JS“ zum HTML-Block $('HTML').addClass('JS') hinzu. Sie können CSS-Stile hinzufügen.
3. Vorschläge zur Optimierung der Ereignisleistung
16. Beim Laden
wird manchmal (window).load verwendet. Manchmal wird (window).load() anstelle von $(document).ready verwendet .() ist schneller, da letzteres nicht wartet, bis alle DOM-Elemente heruntergeladen wurden. Sie sollten es testen, bevor Sie es verwenden.
17. Verwenden Sie die Ereignisdelegierung.
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 „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 zum Testen JavaScript-Code soll von Menschen verwendet werden. Kommen Sie und testen Sie. 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
häufig, prüfen Sie, 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 Leistungsoptimierung von jQuery.
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. Verwendung von HMTL5
Der neue HTML5-Standard bringt eine leichtere DOM-Struktur mit sich. Eine leichtere Struktur bedeutet, dass bei der Verwendung von jQuery weniger Durchläufe erforderlich sind und die Ladeleistung besser ist. Bitte verwenden Sie daher nach Möglichkeit HTML5.
23. Wenn Sie mehr als 15 Elementen Stile hinzufügen möchten,
können Sie Stil-Tags am besten direkt zu DOM-Elementen hinzufügen, indem Sie die css()-Funktion von jQuey verwenden, um einige Elemente zu formatieren. 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 ihn 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. Es ist großartig, bei Bedarf natives Javascript zu verwenden.
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, was serverseitige Ladezeit sparen kann. Sie können mit einem allgemeinen Seitenleisten-Widget beginnen.
[Empfohlenes Lernen: jQuery-Video, Web-Front-End-Entwicklung]
Wie kann die Leistung von jQuery optimiert werden? Weitere Informationen zur Zusammenfassung der Optimierungsmethoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
