suchen

Heim  >  Artikel  >  Web-Frontend  >  So schreiben Sie hochwertigen jQuery-Code (Leistungsprobleme bei der Verwendung von jquery)_jquery

So schreiben Sie hochwertigen jQuery-Code (Leistungsprobleme bei der Verwendung von jquery)_jquery

WBOY
WBOYOriginal
2016-05-16 16:42:561287Durchsuche

1. Zitieren Sie jQuery richtig

1. Versuchen Sie, jQuery vor dem Ende des Körpers einzuführen, nicht im Kopf.
2. Verwenden Sie das von einem Drittanbieter bereitgestellte CDN, um jQuery einzuführen. Achten Sie gleichzeitig darauf, lokale jQuery-Dateien einzuführen, wenn bei der Verwendung eines Drittanbieter-CDN Probleme auftreten. (Dies kann für Websites ignoriert werden, die bereits CDN verwendet haben. Da die Benutzerbandbreite nun aktualisiert wurde, kann dies ignoriert werden. Die Bereitstellung auf den Computern anderer Personen ist möglicherweise nicht stabil.)
3. Wenn die Skriptdatei vor 36cc49f0c466276486e50c850b7e4956 eingeführt wird, muss document.ready nicht geschrieben werden, da das DOM bereits geladen wurde, wenn der js-Code ausgeführt wird. 

<body>
 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script>
</body>

2. jQuery-Selektor optimieren

Die effiziente und korrekte Verwendung von jQuery-Selektoren ist die Grundlage für die kompetente Verwendung von jQuery-Selektoren. Wenn wir mit dem Erlernen von jQuery beginnen, sollten wir auf die Verwendung von Selektoren achten. 

<div id="nav" class="nav">
 <a class="home" href="http://www.jb51.net">脚本之家</a>
 <a class="articles" href="http://www.jb51.net/list/list_172_1.htm">jQuery教程</a>
</div>

Wenn wir ein Element mit der Klasse als Zuhause auswählen, können wir den folgenden Code verwenden: 

$('.home'); //1
$('#nav a.home'); //2
$('#nav').find('a.home'); //3

1. Methode 1 führt dazu, dass jQuery im gesamten DOM nach einem Element mit der Klasse home sucht, und die Leistung kann man sich vorstellen.
2. Methode 2 fügt dem zu durchsuchenden Element Kontext hinzu. Hier wird nach dem Unterelement mit der ID nav gesucht. Die Suchleistung wurde erheblich verbessert.
3. Methode 3 verwendet die Suchmethode, die schneller ist, daher ist Methode 3 die beste.

In Bezug auf die Leistungspriorität von jQuery-Selektoren sind ID-Selektoren schneller als Elementselektoren und Elementselektoren sind schneller als Klassenselektoren. Da ID-Selektoren und Element-Selektoren native JavaScript-Operationen sind, Klassenselektoren jedoch nicht, können Sie sich den Unterschied zwischen find context und find()-Kindern ansehen.

3. Zwischenspeichern von jQuery-Objekten

Das Zwischenspeichern von jQuery-Objekten kann unnötige DOM-Suchen reduzieren. In diesem Zusammenhang können Sie auf das Zwischenspeichern von jQuery-Objekten verweisen, um die Leistung zu verbessern.

Korrekter Einsatz der Ereignisdelegation
Ereignisdelegierung kann die Ausführung von Ereignissen für dynamisch hinzugefügte Elemente verbessern. In der neuen Version von jQuery wird empfohlen, eine oder mehrere Ereignisverarbeitungsfunktionen zu verwenden. 

<table id="t">
 <tr>
  <td>我是单元格</td>
 </tr>
</table>

Wenn wir beispielsweise ein Klickereignis an die obere Zelle binden möchten, könnte ein Gelegenheitsfreund es wie folgt schreiben: 

$('#t').find('td').on('click', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

Dadurch werden Ereignisse an jedes td gebunden. Beim Test der Bindung von Klickereignissen an 100 Zellen beträgt der Leistungsunterschied zwischen den beiden bis zu 7 Mal: ​​

$('#t').on('click', 'td', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

5. Optimieren Sie den jQuery-Code
Zum Beispiel haben wir im obigen Code den jQuery-Code und in ähnlicher Weise die .attr()-Methode usw. entsprechend zusammengeführt, aber wir haben ihn nicht auf die folgende Weise geschrieben: 

$('#t').on('click', 'td', function () {
 $(this).css('color', 'red').css('background', 'yellow');
});

6. DOM-Operationen reduzieren
Wenn Sie jQuery zum ersten Mal verwenden, bedienen Sie möglicherweise häufig das DOM, was ziemlich leistungsintensiv ist. Wenn wir eine Tabelle dynamisch im Hauptteil ausgeben möchten, schreiben einige Freunde so: 

var $t = $('body');
$t.append('<table>');
$t.append('<tr><td>1</td></tr>');
$t.append('</table>');

Gute Praktiken: 

$('body').append('<table><tr><td>1</td></tr></table>');

Auf diese Weise muss die DOM-Operation nur einmal ausgeführt werden, nachdem die Tabellenzeichenfolge gespleißt und dann dem Hauptteil hinzugefügt wurde. Ein Freund in der Gruppe hatte aus diesem Grund Probleme bei der Ausgabe unter IE. Bezüglich des Zusammenfügens von Zeichenfolgen können Sie sich auf die schnellste Möglichkeit beziehen, eine Zeichenfolge zu erstellen.

7. Verwenden Sie kein jQuery

Native Funktionen sind immer die schnellsten. Das ist nicht schwer zu verstehen. Beim Schreiben von Code sollten wir natives JS nicht vergessen.

Lassen Sie uns zunächst diese Vorschläge zusammenfassen. Jeder Vorschlag ist nicht schwer zu verstehen, aber es wird dennoch viel Zeit in Anspruch nehmen, ihn umfassend zusammenzufassen. Wenn Sie beispielsweise im reduzierten Codesegment ein neues Array aus einem Array basierend auf Bedingungen abrufen müssen, können Sie die Methode $.grep() verwenden. Wenn Sie eigene Tipps für die Verwendung von jQuery haben , bitte hinterlassen Sie einen Kommentar. Teilen Sie ihn mit allen!

Das Folgende sind die Ergänzungen anderer Internetnutzer:

Achten Sie darauf, das Schlüsselwort var hinzuzufügen, wenn Sie jQuery-Variablen definieren
Dies gilt nicht nur für jQuery, sondern muss auch in allen Javascript-Entwicklungsprozessen beachtet werden. Bitte definieren Sie es nicht wie folgt:

$loading = $('#loading'); //Dies ist eine globale Definition. Wenn Sie versehentlich irgendwo auf denselben Variablennamen verweisen, werden Sie zu Tode deprimiert.

Bitte verwenden Sie eine Variable, um Variablen zu definieren
​Wenn Sie mehrere Variablen verwenden, definieren Sie diese bitte wie folgt:

Code kopieren Der Code lautet wie folgt:

var page = 0,
$loading = $('#loading'),
$body = $('body');

Fügen Sie nicht jeder Variablen ein var-Schlüsselwort hinzu, es sei denn, Sie leiden an einer schweren Zwangsstörung
Definieren Sie jQuery-Variablen
Bitte denken Sie beim Deklarieren oder Definieren von Variablen daran, dass Sie beim Definieren einer jQuery-Variablen bitte ein $-Symbol vor der Variablen hinzufügen, wie folgt:

var$loading = $('#loading');

Der Vorteil einer solchen Definition besteht darin, dass Sie sich selbst oder andere Benutzer, die Ihren Code lesen, effektiv daran erinnern können, dass es sich um eine jQuery-Variable handelt.

Bitte denken Sie daran, beim Betrieb von DOM zwischenzuspeichern

Bei der Entwicklung von jQuery-Code müssen wir häufig DOM-Operationen durchführen. Der DOM-Vorgang ist ein sehr ressourcenintensiver Prozess, und viele Leute verwenden jQuery oft gerne wie folgt:

Code kopieren Der Code lautet wie folgt:

$('#loading').html('Complete');
$('#loading').fadeOut();

An dem Code ist nichts auszusetzen, und Sie können ihn normal ausführen und Ergebnisse erhalten. Beachten Sie jedoch, dass Sie bei Bedarf jedes Mal, wenn Sie $('#loading') definieren und aufrufen, tatsächlich eine neue Variable erstellen Verwenden Sie es erneut. Denken Sie daran, es in einer Variablen zu definieren, damit der Variableninhalt wie folgt effektiv zwischengespeichert werden kann:

Code kopieren Der Code lautet wie folgt:

var $loading = $('#loading');
$loading.html('Fertig');$loading.fadeOut();

Die Leistung wird auf diese Weise besser sein.

Verwenden Sie Kettenoperationen

Wir können das obige Beispiel prägnanter schreiben:

Code kopieren Der Code lautet wie folgt:

var $loading = $('#loading');
$loading.html('Finished').fadeOut();

JQuery-Code optimieren

Versuchen Sie, einige Codes miteinander zu integrieren. Bitte codieren Sie nicht wie folgt:

Code kopieren Der Code lautet wie folgt:

//! ! Bösewicht $button.click(function(){
$target.css('width','50%');
$target.css('border','1px solid #202020');
$target.css('color','#fff');
});

sollte so geschrieben werden:

Code kopieren Der Code lautet wie folgt:

$button.click(function(){
$target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});
});

Vermeiden Sie die Verwendung globaler Typselektoren

Bitte schreiben Sie nicht wie folgt: $('.something > *');
Es ist besser, so zu schreiben: $('.something').children();

Überlappen Sie nicht mehrere IDs

Bitte schreiben Sie nicht wie folgt: $('#something #children');
Das reicht: $('#children');

Verwenden Sie logisches Urteilsvermögen || oder &&, um zu beschleunigen

Bitte schreiben Sie nicht wie folgt:

Code kopieren Der Code lautet wie folgt:

if(!$something) {
$something = $('#something ');
}

Auf diese Weise ist die Schreibleistung besser:

$something= $something||. $('#something');


Verwenden Sie so wenig Code wie möglich

Anstatt so zu schreiben: if(string.length > 0){..}

Es ist besser, es so zu schreiben: if(string.length){..}

Versuchen Sie, die .on-Methode zu verwenden
 Wenn Sie eine neuere Version der jQuery-Klassenbibliothek verwenden, verwenden Sie bitte .on. Alle anderen Methoden werden letztendlich mit .on implementiert.

Versuchen Sie, die neueste Version von jQuery zu verwenden
Die neueste Version von jQuery bietet eine bessere Leistung, unterstützt jedoch möglicherweise IE6/7/8 nicht. Sie müssen daher entsprechend der tatsächlichen Situation auswählen.

Versuchen Sie, natives Javascript zu verwenden
Wenn die von jQuery bereitgestellten Funktionen auch mit nativem Javascript implementiert werden können, empfiehlt es sich, zur Implementierung natives JavaScript zu verwenden.

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 Zeit des js-Bildlaufeffekts kann nach Belieben eingestellt werden und stoppt, wenn die Maus nach oben bewegt wird._Javascript-FähigkeitenNächster Artikel：Die Zeit des js-Bildlaufeffekts kann nach Belieben eingestellt werden und stoppt, wenn die Maus nach oben bewegt wird._Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen