Analyse der jQuery-Leistungsoptimierungstechniken_jquery

In diesem Artikel werden Techniken zur jQuery-Leistungsoptimierung detaillierter analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Verwenden Sie die neueste Version der jQuery-Klassenbibliothek

Die neue Version von jQuery wird im Vergleich zur Vorgängerversion Fehlerkorrekturen und einige Optimierungen enthalten. Vergessen Sie jedoch nicht, Ihren Code nach dem Ändern zu testen abwärtskompatibel.

2. Verwenden Sie geeignete Selektoren

Die beste bis schlechteste Leistung von jQuery-Selektoren ist wie folgt:

ID-Selektor, z. B. $('#id', context)
Tag-Selektor, z. B. $('p', context)
Klassenselektor, z. B. $('.class', context)
Attributselektor, z. B. $('[attribute=value]', context)
Pseudoklassenselektor, z. B. $(':hidden', context)

Ergänzungen und Hinweise:

Versuchen Sie, den Kontext für den Selektor anzugeben, um den Umfang der positionierten Elemente einzugrenzen
Vermeiden Sie wiederholte Änderungen der ID. Fehlercode: var $el = $('#list #item1')
Vermeiden Sie, dass Tags oder Klassen IDs ändern. Fehlercode: var $el = $('ul #item1')
Wenn Sie einen Attributselektor verwenden, versuchen Sie, den Tag-Selektor anzugeben, um den Zugriff zu beschleunigen: var $el = $('a[title="link"]')

3. Cache-Objekt

So können Sie schlechte Leistungen erbringen:

$('#home').css(...);
$('#home').bind('click', function() {});
$('#home').addClass(...);

Hinweis: jQuery durchsucht das DOM während der Erstellung jedes Selektors, was Zeit und Leistung kostet.

Besser:

var $homeLink = $('#home', context);
$homeLink.css(...);
$homeLink.bind('click', function() {});
$homelink.addClass(...);

Hinweis: Lassen Sie niemals zu, dass derselbe Selektor mehrmals in Ihrem Code erscheint.

4. DOM-Betrieb während der Schleife

Mit jQuery können Sie DOM-Knoten problemlos hinzufügen, löschen oder ändern. Bei der Verarbeitung von Knoten in einigen Schleifen, z. B. for(), while() oder $.each(), gibt es unten ein Beispiel, das Ihre Aufmerksamkeit verdient :

var $list = $('#list');
for(var i = 0; i < 100; i++) {
  $list.append('<li>' + i + '</li>');
}

Hinweis: Fügen Sie li-Knoten 100 Mal in einer Schleife hinzu. Dieser Vorgang verbraucht viel Leistung. Daher ist es besser, alle hinzuzufügenden Knoten zu erstellen, bevor Sie sie in den DOM-Baum einfügen, und sie dann dem DOM hinzuzufügen Baum auf einmal. Besserer Weg:

var $list = $('#list'),
  fragment = '';
for(var i = 0; i < 100; i++) {
  fragment += '<li>' + i + '</li>';
}
$list.append(fragment);

5. Verwendung von jQuery-Objekten im Array

Verwenden Sie den jQuery-Selektor, um das Ergebnis zu erhalten, das ein jQuery-Objekt ist. Im Hinblick auf die Leistung wird empfohlen, anstelle von $.each() eine einfache for- oder while-Schleife zu verwenden, wodurch Ihr Code schneller wird.

Beachten Sie außerdem: Durch die Überprüfung der Länge können Sie überprüfen, ob ein jQuery-Objekt vorhanden ist.

var $list = $('#list');
if($list) {  //总是true
  //do something
}
if($list.length) { //拥有元素才返回true
  //do something
}

6. Event-Agent

Jedes JavaScript-Ereignis (z. B. Klick, Mouseover) wird zum übergeordneten Knoten weitergeleitet. Dies ist nützlich, wenn wir dieselbe Funktion für mehrere Elemente aufrufen müssen.

...
<ul id="list">
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  ...
</ul>
...

var $item1 = $('#item1'),
  $item2 = $('#item2'),
  $item3 = $('#item3');
  ...

$item1.click(function() {...});
$item2.click(function() {...});
$item3.click(function() {...});
...

Hinweis: Auf diese Weise werden bei 100 Li 100 Ereignisse gebunden. Offensichtlich ist es unwissenschaftlich und führt zu großen Leistungsverlusten.

Ein besserer Weg ist: Binden Sie einfach ein Ereignis einmal an den übergeordneten Knoten ul von li und lassen Sie dann das aktuelle Element über event.target anklicken.

var $list = $('#list');
$list.click(function(e) {
  var $currentItem = $(e.target);  //e.target捕捉到当前触发事件的目标元素
  ...
});

7. Konvertieren Sie Ihren Code in ein jQuery-Plug-in

Wenn Sie jedes Mal Zeit damit verbringen, ähnlichen jQuery-Code zu schreiben, können Sie erwägen, diesen ähnlichen Code in ein Plug-In umzuwandeln, das Ihren Code wiederverwendbar macht und Ihnen effektiv bei der Organisation Ihres Codes hilft.

8. Verwenden Sie das Javascript-Array join(), um Zeichenfolgen zu verbinden

Bei der Verarbeitung langer Zeichenfolgen hilft die Verwendung der Methode „join()“ dabei, die Leistung zu optimieren.

var arr = [];
for(var i = 0; i < 100; i++){
  arr[i] = '<li>' + i + '</li>';
}
$list.html(arr.join(''));

9. Angemessene Verwendung von HTML5-Datenattributen

Das Datenattribut von HTML5 kann uns beim Einfügen von Daten helfen, insbesondere beim Datenaustausch zwischen Front- und Back-End. Die data()-Methode von jQuery nutzt effektiv HTML5-Attribute, um automatisch Daten abzurufen.

...
<a id="info" data-info-index="23" data-role="linkInfo"></a>
...

var $infoLink = $('#info');
var infoIndex = $infoLink.data('info-index');
var type = $infoLink.data('linkInfo');

10. Versuchen Sie, native JavaScript-Methoden zu verwenden

Zum Beispiel:

$(this).css('color': 'blue');

Optimiert für:

this.style.color = 'blue';

Zum Beispiel:

$('<p></p>');

Optimiert für:

$(document.createElement('p'));

11. Komprimieren Sie JavaScript

Komprimieren Sie JavaScript-Dateien mit einem Komprimierungstool.
Wenn Sie Ihr Projekt veröffentlichen, sollten Sie eine „minimierte“ Version Ihrer JavaScript-Dateien verwenden.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.