Einige Vorschläge zur JQuery-Leistungsoptimierung_jquery

Jeder muss etwas über das Thema JQuery-Leistungsoptimierung wissen. Nachfolgend finden Sie einige Informationen, die ich zur Optimierung der JQuery-Leistung gesammelt habe.

1. Vorschläge zur Selektorleistungsoptimierung

1. Immer vom #id-Selektor 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 das Tag zum Ändern der Klasse zu verwenden (und die nächste ID nicht zu vergessen).

3. Unterabfrage verwenden: Das übergeordnete Objekt für die zukünftige Verwendung zwischenspeichern;

4. Verwenden Sie find() anstelle der Kontextsuche;

5. Nutzen Sie leistungsstarke Kettenoperationen: Die Verwendung der Kettenoperationen von jQuery ist effektiver als das Caching von Selektoren

2. Vorschläge zur Optimierung von DOM-Operationen

1. jQuery-Objekte zwischenspeichern: Zwischenspeichern von Elementen, die Sie häufig verwenden;

2. Kapseln Sie beim DOM-Einfügen alle Elemente in einem Element: Die Grundidee hier besteht darin, im Speicher das aufzubauen, was Sie wirklich wollen, 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 Direkte DOM-Operationen sind sehr langsam. Ändern Sie die HTML-Struktur so wenig wie möglich.

3. Verwenden Sie direkte Funktionen anstelle gleichwertiger Funktionen: Für eine bessere Leistung sollten Sie direkte Funktionen wie $.ajax() anstelle von $.get(), $.getJSON(),$.post() verwenden, weil Die nächsten Aufrufe werden $.ajax() aufrufen.

4. JQuery-Ergebnisse für die spätere Verwendung zwischenspeichern:
Sie erhalten häufig ein Javascript-Anwendungsobjekt – Sie können die Objekte, die Sie häufig auswählen, für die zukünftige Verwendung speichern

3. Vorschläge zur Optimierung der Veranstaltungsleistung

1. Auf $(window).load verweisen:
Manchmal ist es schneller, $(window).load() als $(document).ready() zu verwenden, da letzteres nicht auf alle DOM-Elemente wartet Wird geladen, bevor der Download abgeschlossen ist. Sie sollten es testen, bevor Sie es verwenden.

2. 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. Rufen Sie zuerst die Tabelle ab und legen Sie dann Delegationsereignisse für alle TD-Knoten fest

4. Weitere gängige Vorschläge zur jQuery-Leistungsoptimierung

　1. 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.

2. Verwenden Sie HMTL5 Der neue HTML5-Standard bringt eine leichtere DOM-Struktur. 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.

　 3. 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.

4. 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.

5. Komprimieren Sie es in eine Haupt-JS-Datei und beschränken Sie die Anzahl der Downloads auf ein Minimum.
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.

6. Verwenden Sie bei Bedarf natives Javascript

Die Verwendung von jQuery ist eine tolle 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.

7. Laden Sie das jQuery-Framework von Google
Wenn Ihre Anwendung offiziell gestartet ist, 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.