Detaillierte Erläuterung der Jquery-Leistungsoptimierung_jquery

Nach langem Suchen habe ich endlich einige Artikel zur JQuery-Leistungsoptimierung gefunden. Der Herausgeber hat sie entschlossen gesammelt, und natürlich konnte ich nicht vergessen, einige meiner eigenen Zusammenfassungen und Erkenntnisse hinzuzufügen.

Zuallererst ist die JQuery-Kettenoperation im vorherigen Artikel eine der Methoden zur Optimierung der JQuery-Leistung. Die spezifische Implementierung und die Vorteile werden hier nicht wiederholt. Zweitens ist die JQuery-Optimierung mit einigen Methoden der Weboptimierung identisch.

a. Komprimieren Sie js. Verwenden Sie die Codekomprimierungstechnologie, um die Dateigröße zu reduzieren. (Mit jsmin, YUI Compressor usw.).

b. Ereignisse, die standardmäßig in untergeordneten Knoten auftreten, können von übergeordneten Knoten verarbeitet werden. Platzieren Sie die Ereignisregistrierung auf dem übergeordneten Knoten, sodass keine Notwendigkeit besteht, Ereignis-Listener für jeden untergeordneten Knoten zu registrieren.

c. Wenn ein JQuery-Objekt mehrmals verwendet wird, kann das JQuery-Objekt in einer Variablen zwischengespeichert werden.

Code kopieren Der Code lautet wie folgt:

var nodeTd = $("table td" );
var $cj = $("#cj");

$cj.on("click",function(){
$cj.css("color","blue");})

JQuery-Ergebniscache. Wenn Sie das JQuery-Ergebnisobjekt an anderer Stelle im Programm verwenden müssen oder die Funktion mehrmals ausgeführt wird, können Sie es in einer Variablen speichern.

d. Versuchen Sie, vom ID-Selektor zu erben. Aufgrund der Einzigartigkeit von id ist die id-Auswahl der schnellste Weg, ein Element in jquery auszuwählen.

Code kopieren Der Code lautet wie folgt:

$("#firstd").slideDown (500) ;
$("#firstd img").slideUp(500);//ID-Selektorvererbung verwenden, um mehrere Elemente auszuwählen

e. Unterabfrage verwenden

Code kopieren Der Code lautet wie folgt:

zhuye.on("swiperight"," #data li ",function(){
                                                                                                                                      

f. Verwenden Sie find(), das keine Kontextsuche verwendet. Die Funktion .find() ist schneller und wurde in e oben verwendet.

g. Verwenden Sie die interne Funktion data() von jquery, um den Status zu speichern (diese Methode zur Leistungsoptimierung wurde erstmals auf Baidu gesehen, daher zitieren wir vorerst direkt sein Beispiel).

Code kopieren Der Code lautet wie folgt:$('#head').data ('name ', 'value');

// Rufen Sie es dann in Ihrer Anwendung auf:

$('#head').data('name');



h. Verwenden Sie abschließend die neue Version von jQuery und vereinfachen Sie den JQuery-Code.

Code kopieren Der Code lautet wie folgt:$(document).ready(function ( ){

});

$(function (){
});