22 Vorschläge zur Optimierung der JQuery-Leistung_jQuery

Bedenken Sie zunächst, dass es sich bei jQuery um Javascript handelt. Das bedeutet, dass wir die gleichen Codierungskonventionen, Styleguides und Best Practices übernehmen sollten.

Wenn Sie ein Javascript-Neuling sind, empfehle ich Ihnen zunächst, „24 JavaScript-Best Practices für Anfänger“ zu lesen. Es ist am besten, es zu lesen, bevor Sie mit jQuery beginnen.

Wenn Sie bereit sind, jQuery zu verwenden, empfehle ich Ihnen dringend, diese Richtlinien zu befolgen:

1. Cache-Variablen

DOM-Durchquerung ist teuer, also versuchen Sie, wiederverwendete Elemente zwischenzuspeichern.

Code kopieren Der Code lautet wie folgt:

//Ups
h=$ ('# element').height();
$('#element').css('height',h-20);

Code kopieren Der Code lautet wie folgt:

//Vorschlag
$element= $(' #element');
h=$element.height();
$element.css('height',h-20);

2. Vermeiden Sie globale Variablen

jQuery Wie bei Javascript ist es im Allgemeinen am besten, sicherzustellen, dass sich Ihre Variablen innerhalb des Funktionsbereichs befinden.

Code kopieren Der Code lautet wie folgt:

//Ups
$element= $(' #element');
h=$element.height();
$element.css('height',h-20);

Code kopieren Der Code lautet wie folgt:

//Vorschlag
var $element =$( '#element');
var h=$element.height();
$element.css('height',h-20);

3. Verwenden Sie die ungarische Nomenklatur

Fügen Sie das Präfix $ vor Variablen hinzu, um jQuery-Objekte leicht zu identifizieren.

Code kopieren Der Code lautet wie folgt:

//Ups
var first= $(' #first');
var second=$('#second');
var value=$first.val();

Code kopieren Der Code lautet wie folgt:

// Vorschlag – Stellen Sie dem jQuery-Objekt ein Präfix voran $
var $first=$('#first');
var $second=$('#second'),
var value=$first.val();

4. Verwenden Sie die Var-Kette (Einzelvar-Modus)

Um mehrere var-Anweisungen in einer Anweisung zu kombinieren, empfehle ich, nicht zugewiesene Variablen am Ende einzufügen.

Code kopieren Der Code lautet wie folgt:

var
$first=$( '#first '),
$second=$('#second'),
value=$first.val(),
k=3,
cookiestring='SOMECOOKIESPLEASE',
i,
j,
myArray={};

5. Bitte verwenden Sie „on“

In der neuen Version von jQuery wird das kürzere on("click") verwendet, um Funktionen wie click() zu ersetzen. In früheren Versionen war on() bind(). Seit jQuery 1.7 ist on() die bevorzugte Methode zum Anhängen von Event-Handlern. Aus Gründen der Konsistenz können Sie jedoch einfach die gesamte on()-Methode verwenden.

Code kopieren Der Code lautet wie folgt:

//Ups
$first. click(function (){
$first.css('border','1px solid red');
$first.css('color','blue');
});

$first.hover(function(){
$first.css('border','1px solid red');
})

Code kopieren Der Code lautet wie folgt:

// Vorschlag
$first. on(' click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
} )

$first.on('hover',function(){
$first.css('border','1px solid red');
})

6. Javascript vereinfachen

Im Allgemeinen ist es am besten, Funktionen wann immer möglich zu kombinieren.

Code kopieren Der Code lautet wie folgt:

//Ups
$first. click(function (){
$first.css('border','1px solid red');
$first.css('color','blue');
});

Code kopieren Der Code lautet wie folgt:

//Vorschlag
$first. on(' click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
}) ;

7. Kettenbetrieb

Es ist sehr einfach, Methodenverkettungsoperationen in jQuery zu implementieren. Nutzen Sie dies unten.

Code kopieren Der Code lautet wie folgt:

//Ups
$second. html(value );
$second.on('click',function(){
warning('hello Everyone');
});
$second.fadeIn('slow') ;
$second.animate({height:'120px'},500);

Code kopieren Der Code lautet wie folgt:

//Vorschlag
$second. html(value );
$second.on('click',function(){
warning('hello Everyone');
}).fadeIn('slow').animate({height: '120px' },500);

8. Sorgen Sie für die Lesbarkeit des Codes

Zusammen mit der Optimierung des Codes und der Verwendung von Verkettungen kann es sein, dass der Code schwer zu lesen ist. Das Hinzufügen von Quetschungen und Zeilenumbrüchen kann wahre Wunder bewirken.

Code kopieren Der Code lautet wie folgt:

//Ups
$second. html(value );
$second.on('click',function(){
warning('hello Everyone');
}).fadeIn('slow').animate({height: '120px' },500);

Code kopieren Der Code lautet wie folgt:

//Vorschlag
$second. html(value );
$second
.on('click',function(){ warning('hello Everyone');})
.fadeIn('slow')
.animate( {height: '120px'},500);

9. Kurzschlussauswertung auswählen

Kurzschlussauswertung ist ein Ausdruck, der von links nach rechts unter Verwendung der Operatoren && (logisches UND) oder || (logisches ODER) ausgewertet wird.

Code kopieren Der Code lautet wie folgt:

//Ups
function initVar( $myVar) {
if(!$myVar) {
$myVar=$('#selector');
}
}

Code kopieren Der Code lautet wie folgt:

//Vorschlag
function initVar( $myVar) {
$myVar=$myVar ||. $('#selector');
}

10. Wählen Sie die Verknüpfung

Eine Möglichkeit, Ihren Code zu optimieren, besteht darin, Codierungsverknüpfungen zu nutzen.

[code]
//Ups
if(collection.length > 0){..}

Code kopieren Der Code lautet wie folgt:

//Vorschlag
if(collection .Länge) {..}

11. Trennen Sie die Elemente bei schweren Einsätzen

Wenn Sie vorhaben, viele Operationen an DOM-Elementen durchzuführen (mehrere Attribute oder CSS-Stile nacheinander festzulegen), empfiehlt es sich, die Elemente zuerst zu trennen und dann hinzuzufügen.

Code kopieren Der Code lautet wie folgt:

//Ups
var
$container=$("#container"),
$containerLi=$("#container li"),
$element=null;

$element=$containerLi.first();
//... Viele komplexe Operationen

Code kopieren Der Code lautet wie folgt:

//Vorschlag
var
$container =$("#container"),
$containerLi=$container.find("li"),
$element=null;

$element=$containerLi.first().detach();
//... Viele komplexe Operationen

$container.append($element);

12. Fähigkeiten auswendig lernen

Möglicherweise sind Sie mit der Verwendung von Methoden in jQuery unerfahren. Schauen Sie sich unbedingt die Dokumentation an. Möglicherweise gibt es eine bessere oder schnellere Möglichkeit, sie zu verwenden.

Code kopieren Der Code lautet wie folgt:

//Ups
$(' #id' ).data(key,value);

Code kopieren Der Code lautet wie folgt:

// Vorschlag (effizient)
$.data ('#id',key,value);

13. Übergeordnete Elemente, die mithilfe von Unterabfragen zwischengespeichert werden

Wie bereits erwähnt, ist die DOM-Durchquerung ein teurer Vorgang. Ein typischer Ansatz besteht darin, übergeordnete Elemente zwischenzuspeichern und diese zwischengespeicherten Elemente bei der Auswahl untergeordneter Elemente wiederzuverwenden.

Code kopieren Der Code lautet wie folgt:

//Ups
var
$container =$('#container'),
$containerLi=$('#container li'),
$containerLiSpan=$('#container li span');

Code kopieren Der Code lautet wie folgt:

// Vorschlag (effizient)
var
$container=$('#container '),
$containerLi=$container.find('li'),
$containerLiSpan= $containerLi.find('span');

14. Vermeiden Sie Universalselektoren

Das Einfügen des Universalselektors in einen Nachkommenselektor hat eine schreckliche Leistung.

Code kopieren Der Code lautet wie folgt:

//Ups
$(' .container > ; *');

Code kopieren Der Code lautet wie folgt:

//Vorschlag
$(' .container' ).children();

15. Vermeiden Sie implizite Universalselektoren

Universelle Selektoren sind manchmal implizit und schwer zu erkennen.

Code kopieren Der Code lautet wie folgt:

//Ups
$(' .someclass: radio');

Code kopieren Der Code lautet wie folgt:

//Vorschlag
$(' .someclass input :radio');

16. Optimierungsselektor

Zum Beispiel sollte der ID-Selektor eindeutig sein, sodass keine Notwendigkeit besteht, zusätzliche Selektoren hinzuzufügen.

Code kopieren Der Code lautet wie folgt:

//Ups
$(' div#myid ');
$('div#footer a.myLink');

Code kopieren Der Code lautet wie folgt:

// Vorschlag
$(' #myid' );
$('#footer .myLink');

17. Vermeiden Sie mehrere ID-Selektoren

Hier wird betont, dass der ID-Selektor eindeutig sein sollte, es keine Notwendigkeit gibt, zusätzliche Selektoren hinzuzufügen und es keine Notwendigkeit für mehrere Nachkommen-ID-Selektoren gibt.

Code kopieren Der Code lautet wie folgt:

//Ups
$(' #außen #innen');

Code kopieren Der Code lautet wie folgt:

//Vorschlag
$(' #inner' );

18. Bleiben Sie bei der neuesten Version

Neue Versionen sind normalerweise besser: leichter und effizienter. Natürlich müssen Sie die Kompatibilität des Codes berücksichtigen, den Sie unterstützen möchten. Version 2.0 unterstützt beispielsweise Internet Explorer 6/7/8 nicht.

19. Veraltete Methoden aufgeben

Es ist sehr wichtig, bei jeder neuen Version auf veraltete Methoden zu achten und zu versuchen, die Verwendung dieser Methoden zu vermeiden.

Code kopieren Der Code lautet wie folgt:

//Ups - Live wurde abgebrochen
$( '#stuff').live('click',function() {
console.log('hooray');
});

Code kopieren Der Code lautet wie folgt:

// Vorschlag
$(' #stuff' ).on('click',function() {
console.log('hooray');
});
// Hinweis: Das könnte unangemessen sein, es sollte so live sein kann eine Echtzeitbindung erreichen, Delegieren ist möglicherweise besser geeignet

20. Nutzen Sie CDN

Googles CND stellt sicher, dass der Cache ausgewählt wird, der dem Nutzer am nächsten liegt, und schnell reagiert. (Bitte suchen Sie die Adresse selbst, wenn Sie Google CND verwenden. Die Adresse hier kann nicht verwendet werden. Wir empfehlen das CDN, das von der offiziellen Website von jquery bereitgestellt wird.)

21. Kombinieren Sie bei Bedarf jQuery und Javascript-nativen Code

Wie oben erwähnt, ist jQuery Javascript, was bedeutet, dass alles, was Sie mit jQuery tun können, auch mit nativem Code erledigt werden kann. Nativer Code (oder Vanilla) ist möglicherweise weniger lesbar und wartbar als jQuery und der Code ist länger. Aber es bedeutet auch effizienter (normalerweise gilt: Je näher am zugrunde liegenden Code, desto weniger lesbar, desto höher die Leistung, zum Beispiel: Assembler, was natürlich leistungsfähigere Leute erfordert). Bedenken Sie, dass kein Framework kleiner, leichter und effizienter sein kann als nativer Code (Hinweis: Der Testlink ist nicht mehr gültig, Sie können online nach dem Testcode suchen).

Angesichts der Leistungsunterschiede zwischen Vanilla und jQuery empfehle ich dringend, das Beste aus beiden zu nutzen und (wenn möglich) nativen Code zu verwenden, der jQuery entspricht.

22. Abschließender Hinweis

Abschließend habe ich diesen Artikel mit dem Ziel aufgezeichnet, die Leistung von jQuery zu verbessern und einige andere gute Vorschläge zu machen. Wer tiefer in dieses Thema eintauchen möchte, wird viel Spaß haben. Denken Sie daran, dass jQuery nicht erforderlich ist, sondern nur eine Option. Überlegen Sie, warum Sie es verwenden möchten. DOM-Manipulation? Ajax? Schablone? CSS-Animation? Oder eine Selector-Engine? Vielleicht wäre ein Javascript-Mikroframework oder eine benutzerdefinierte Version von jQuery die bessere Wahl.