suchen

Heim >Web-Frontend >js-Tutorial >Leistungsoptimierung von JQuery teaching_jquery

Leistungsoptimierung von JQuery teaching_jquery

WBOY
WBOYOriginal
2016-05-16 16:48:191045Durchsuche

jQuery ist ein sehr hervorragendes Javascript-Framework. Wenn wir jQuery verwenden, möchten wir nie wieder auf den langwierigen Code von Javascript zurückgreifen, daher liegt die Optimierung von jQuery vor uns. Von welchen Aspekten sollten wir also bei der Optimierung von JQuery ausgehen?

1. Verwenden Sie die neueste Version von jQuery

Die neue Version wird im Vergleich zur alten Version Leistungsverbesserungen aufweisen und neue Funktionen hinzufügen.

2. Verwendung von Selektoren

Normalerweise verwenden wir ID-Selektoren, Klassenselektoren, Elementselektoren, Pseudoklassenselektoren und Elementselektoren. Mein Vorschlag bei der Verwendung ist, dass es am besten ist, den ID-Selektor und anschließend den Klassenselektor > Element-Selektor > zu verwenden.

Wenn es um Selektoren geht, ist es notwendig, einen Satz einzufügen, wenn dies nicht erforderlich ist. Wenn Sie einen Selektor zum Suchen verwenden, beginnen Sie am besten beim übergeordneten Element mit der ID und suchen Sie Schritt für Schritt nach unten.

3. Verwenden Sie jQuery nicht übermäßig

Merken Sie sich einen Satz: Native ist am schnellsten. jQuery bedeutet weniger schreiben, mehr tun (weniger schreiben, mehr tun).

4. Machen Sie einen guten Job beim Caching

Wenn Sie einen Knoten wiederverwenden möchten, können Sie ihn in einer Variablen speichern und bei Verwendung erneut aufrufen. Vermeiden Sie den wiederholten Erwerb von Knoten und die Verringerung der Effizienz.

Code kopieren Der Code lautet wie folgt:

var inputSelect = $("#head . head_right input" );
inputSelect.find("a");
inputSelect.find("i");

5. Verwenden Sie Kettenoperationen

Eines der Highlights von jQuery ist, dass es Kettenoperationen verwenden kann.

Code kopieren Der Code lautet wie folgt:

$("#content").find ("". div").eq(2).html("Hello World");

6. Event-Delegation

Wenn mehrere Geschwisterelemente erforderlich sind, um einen Ereignistyp auszuführen, kann die Ereignisdelegation verwendet werden. Beispiel:

Code kopieren Der Code lautet wie folgt:

                                                       ;div>




Wenn jedes Div mit class="div" ein Klickereignis hat, können wir die Ereignisdelegation verwenden,

Code kopieren

Der Code lautet wie folgt:$("#content").on ("click ","div",function(){  $(this).css("color","#ff5500");
});

7. Schleifen richtig handhaben

Schleifen sind ein zeitaufwändiger Vorgang. Wenn Sie einen Selektor verwenden können, um Elemente direkt auszuwählen, verwenden Sie keine Schleifen, um die Elemente einzeln zu durchlaufen.

Die nativen Javascript-Methoden for und while sind schneller als every() von jQuery. Daher sollten zunächst native Methoden verwendet werden.

8. Reduzieren Sie die Generierung von JQuery-Objekten

Durch das Generieren eines Abfrageobjekts werden entsprechende Eigenschaften und Methoden generiert, was mehr Ressourcen beansprucht. Versuchen Sie also, die Generierung von jQuery-Objekten zu reduzieren.

9. Umfang der Variablen

Wenn eine Variable in mehreren Funktionsaufrufen nicht benötigt wird, sollte die Variable innerhalb der Funktion platziert werden, um die Zeit für die Suche nach dem Code bei der Codeausführung zu verkürzen.

10. Verschieben Sie bestimmte Funktionen auf die Ausführung von $(window).load

$(document).ready ist wirklich einfach zu verwenden, kann aber ausgeführt werden, bevor andere Elemente beim Rendern der Seite heruntergeladen werden.

11. Zusammenführen von Skripten

Skripte werden einzeln geladen. Durch die Reduzierung der Anzahl der Skripte kann auch die Effizienz verbessert werden.

12. Elementkapselung

Beim Einfügen von Inhalten in einen Knoten können Sie den Inhalt zuerst kapseln und dann einfügen.

Code kopieren Der Code lautet wie folgt:

var content = "";
$(" #head").html(content);

Die andere Möglichkeit besteht darin, js-Dateien zu komprimieren.

Mit der weiteren Verwendung von jQuery werden immer mehr Optimierungsmethoden entdeckt.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die native js-Popup-Ebene und das darin enthaltene Fenster basieren auf Javascript-FähigkeitenNächster Artikel：Die native js-Popup-Ebene und das darin enthaltene Fenster basieren auf Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen