Tipps zur Verbesserung der jQuery-Leistungsoptimierung

In diesem Artikel werden hauptsächlich detaillierte Techniken zur Verbesserung der jQuery-Leistungsoptimierung vorgestellt.

Die folgenden Optimierungstipps zur Verbesserung der jQuery-Leistung werden mit Ihnen geteilt:

Cache-Variablen

DOM-Durchquerung ist teuer, also versuchen Sie, sie wiederzuverwenden Element Caching.

// 糟糕
h = $('#element').height();
$('#element').css('height',h-20);
// 建议
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

Globale Variablen vermeiden

Bei jQuery ist es wie bei JavaScript im Allgemeinen am besten, sicherzustellen, dass Ihre Variablen innerhalb des Funktionsumfangs liegen.

// 糟糕
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// 建议
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

Verwenden Sie die ungarische Nomenklatur

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

// 糟糕
var first = $('#first');
var second = $('#second');
var value = $first.val();
// 建议 - 在jQuery对象前加$前缀
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

Verwenden Sie die Var-Kette (Einzel-Var-Modus)

Kombinieren Sie mehrere Var-Anweisungen in einer Anweisung. Ich empfehle, nicht zugewiesene Variablen am Ende einzufügen.

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

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

// 糟糕
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});
$first.hover(function(){
    $first.css('border','1px solid red');
})
// 建议
$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})
$first.on('hover',function(){
    $first.css('border','1px solid red');
})

Javascript optimieren

Im Allgemeinen ist es am besten, Funktionen nach Möglichkeit zu kombinieren.

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

Verkettete Operationen

Es ist sehr einfach, verkettete Operationen von Methoden in jQuery zu implementieren. Nutzen Sie dies unten.

// 糟糕
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
// 建议
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

Aufrechterhaltung der Lesbarkeit des Codes

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

// 糟糕
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
// 建议
$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);

Kurzschlussauswertung auswählen

Kurzschlussauswertung ist ein Ausdruck, der von links nach rechts mit && (logisches UND) oder || ausgewertet wird (Logischer ODER)-Operator.

// 糟糕
function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}
// 建议
function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

Wählen Sie Verknüpfungen

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

// 糟糕
if(collection.length > 0){..}
// 建议
if(collection.length){..}

Elemente bei schweren Vorgängen trennen

Wenn Sie planen, viele Vorgänge an DOM-Elementen durchzuführen (mehrere Attribute oder CSS-Stile kontinuierlich festzulegen), ist dies der Fall Es wird empfohlen, sie zuerst zu trennen. Anschließend wird das Element hinzugefügt.

// 糟糕
var 
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;
$element = $containerLi.first(); 
//... 许多复杂的操作
// better
var 
    $container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;
$element = $containerLi.first().detach(); 
//... 许多复杂的操作
$container.append($element);

Kennen Sie die Tipps

Möglicherweise mangelt es Ihnen an Erfahrung in der Verwendung von Methoden in jQuery. Schauen Sie sich unbedingt die Dokumentation an. Möglicherweise gibt es eine bessere oder schnellere Methode, es zu verwenden.

// 糟糕
$('#id').data(key,value);
// 建议 (高效)
$.data('#id',key,value);

Zwischenspeichern des übergeordneten Elements mithilfe einer Unterabfrage

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.

// 糟糕
var 
    $container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');
// 建议 (高效)
var 
    $container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

Vermeiden Sie universelle Selektoren

Das Einfügen universeller Selektoren in Nachkommenselektoren hat eine schreckliche Leistung.

// 糟糕
$('.container > *'); 
// 建议
$('.container').children();

Implizite Universalselektoren vermeiden

Universelle Selektoren sind manchmal implizit und schwer zu erkennen.

// 糟糕
$('.someclass :radio'); 
// 建议
$('.someclass input:radio');

Selektoren optimieren

Beispielsweise sollte der Id-Selektor eindeutig sein, sodass keine Notwendigkeit besteht, zusätzliche Selektoren hinzuzufügen.

// 糟糕
$('p#myid'); 
$('p#footer a.myLink');
// 建议
$('#myid');
$('#footer .myLink');

Vermeiden Sie mehrere ID-Selektoren. Es wird hier betont, dass der ID-Selektor eindeutig sein sollte. Es besteht keine Notwendigkeit, zusätzliche Selektoren hinzuzufügen, und es besteht keine Notwendigkeit für mehrere Nachkommen-ID-Selektoren.

// 糟糕
$('#outer #inner'); 
// 建议
$('#inner');

Bleiben Sie bei der neuesten Version

Neuere 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 IE 6/7/8 nicht. Veraltete Methoden aufgeben Es ist sehr wichtig, bei jeder neuen Version auf die veralteten Methoden zu achten und zu versuchen, die Verwendung dieser Methoden zu vermeiden.

// 糟糕
$('#outer #inner'); 
// 建议
$('#inner');

Verwendung von CDN

Googles CND kann sicherstellen, dass der Cache ausgewählt wird, der dem Benutzer 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.)

Kombinieren Sie bei Bedarf jQuery und nativen Javascript-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 nicht so lesbar und wartbar wie 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.

Abschließender Rat
Abschließend schreibe ich diesen Artikel mit dem Ziel auf, 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 angepasste Version von jQuery die bessere Wahl.

Das Obige ist die detaillierte Einführung dieses Artikels zur Verbesserung der jQuery-Leistungsoptimierung. Weitere verwandte Tutorials finden Sie im jQuery-Video-Tutorial.