Erweiterte Tipps zur Optimierung der JQuery-Leistung_jquery

Manchmal ignorieren wir beim Schreiben von jQuery aus Gründen der Bequemlichkeit beim Schreiben von Code häufig den Druck, der während der Programmausführung auf den Client ausgeübt wird. Damit einher gehen Probleme wie eine langsame Ausführungsgeschwindigkeit oder sogar die Unfähigkeit, auf einigen Low-End-Browsern oder Low-End-Computern ausgeführt zu werden.

Daher ist es für uns notwendig, unseren eigenen JQuery-Code zu optimieren, um einen schnelleren und reibungsloseren Betrieb zu erreichen.

Erweiterte Techniken zur Optimierung der JQuery-Leistung. Im Folgenden wird die Optimierung der JQuery-Leistung hauptsächlich aus sieben Aspekten vorgestellt:

1. Einführung der jQuery-Bibliothek über CDN (Content Delivery Network)

2. DOM-Operationen reduzieren

3. Verwenden Sie natives JS entsprechend

4. Selektoroptimierung

5. Zwischenspeichern von jQuery-Objekten

6. Definieren Sie eine wiederverwendbare Funktion

7. Verwenden Sie die Array-Methode, um die jQuery-Objektsammlung zu durchlaufen

Die spezifischen Anweisungen für jede Methode werden unten erklärt:

Einführung der jQuery-Bibliothek über CDN (Content Delivery Network)

Der einfachste Schritt zur Verbesserung der Leistung von JavaScript auf Ihrer Website ist die Einführung der neuesten Version der jQuery-Bibliothek. Die neu veröffentlichte Version bietet normalerweise bessere Leistungsverbesserungen und behebt einige Fehler. Oder die Einführung über CDN ist ebenfalls eine gute Wahl. Die Einführung über CDN kann die Ladezeit der Website verkürzen.

Hier sind einige CDN-Dienste:

<!-- Case 1 - jQuery CDN -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script>
<!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script>
<!-- Case 4 - requesting the absolute latest jQuery version (use with caution) -->
<script src="http://code.jquery.com/jquery.min.js" ></script>

Einige inländische CDN-Dienste:

http://www.bootcdn.cn/jquery/
<!--新浪 CDN-->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--百度 CDN-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--Bootstrap CDN-->
http://www.bootcdn.cn/jquery/

DOM-Operationen reduzieren

Obwohl die JavaScript-Leistung erheblich verbessert wurde, sind DOM-Vorgänge immer noch sehr ressourcenintensiv und DOM-Vorgänge müssen reduziert werden. Dies ist besonders wichtig, wenn Sie eine große Anzahl von Elementen in eine Seite einfügen.

Zum Beispiel:

<div id="elem" ></div>

// 不好的方式
//var elem = $('#elem');
//for(var i = 0; i < 100; i++){
// elem.append('<li>element '+i+'</li>');
//}
// 好的方式
var elem = $('#elem' ),
arr = [];
for(var i = 0; i < 100; i++){
arr. push('<li>element ' +i+'</li>' );
}
elem. append(arr. join('' ));

Das Zwischenspeichern aller Elemente und das einmalige Einfügen verbessert die Leistung, da nur ein Neuaufbau der Seite ausgelöst wird. Das Gleiche gilt für CSS-Stileigenschaften.

Weitere Lektüre: Startseite hängt fest? Es kann durch DOM-Vorgänge verursacht werden. Sie müssen den Code optimieren

Natives JS angemessen verwenden

Das Erstellen von jQuery-Objekten bringt einen gewissen Mehraufwand mit sich. Wenn die Leistung wichtiger ist, verwenden Sie daher so oft wie möglich natives Javascript. In mancher Hinsicht ist es möglicherweise einfacher zu verstehen und erfordert weniger Code zum Schreiben. Zum Beispiel:

// 打印list中的li的id
$('#colors li' ). each(function(){
//将$(this).attr('id')方法替换为直接通过ID属性访问
console. log(this. id);
})

Selektoroptimierung

Wenn Sie eine bessere Leistung benötigen, aber dennoch jQuery verwenden möchten, können Sie eine Optimierung des jQuery-Selektors ausprobieren. Das Folgende ist ein Testprogramm, das die Ausführungszeit verschiedener Selektoren über die Konsolenmethoden console.time und console.timeEnd des Browsers aufzeichnet.

HTML:

<div id="peanutButter" >
<div id="jelly" class=".jellyTime" ></div>
</div>
JS:

//测试程序
var iterations = 10000,
  i;
//--------------------------------------------
//Case 1: 很慢
console.time('Fancy');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div:first');
}
console.timeEnd('Fancy');
//--------------------------------------------
//Case 2: 比较好，但仍然很慢
console.time('Parent-child');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div');
}
console.timeEnd('Parent-child');
//--------------------------------------------
//Case 3: 一些浏览器会比较快
console.time('Parent-child by class');
for (i = 0; i < iterations; i++) {
  // 通过后代Class选择器
  $('#peanutButter .jellyTime');
}
console.timeEnd('Parent-child by class');
//--------------------------------------------
//Case 4: 更好的方式 
console.time('By class name');
21
for (i = 0; i < iterations; i++) {
  // 直接通过Class选择器
  $('.jellyTime');
}
console.timeEnd('By class name');
//--------------------------------------------
//Case 5: 推荐的方式 ID选择器
console.time('By id');
for (i = 0; i < iterations; i++) {
  $('#jelly');
}
console.timeEnd('By id');

Ausführungsergebnis:

JQuery-Objekte zwischenspeichern

Jedes Mal, wenn ein neues jQuery-Objekt über einen Selektor erstellt wird, durchläuft die Sizzle-Engine im Kern von jQuery das DOM und gleicht das echte DOM-Element über den entsprechenden Selektor ab. Diese Methode ist relativ ineffizient. Sie können die Methode document.querySelector verwenden, um das entsprechende Element durch Übergabe des entsprechenden Klassenparameters abzugleichen. Versionen unter IE8 unterstützen diese Methode jedoch nicht. Eine Methode zur Verbesserung der Leistung besteht darin, jQuery-Objekte über Variablen zwischenzuspeichern. Zum Beispiel:

<ul id="pancakes" >
     <li>first</li>
     <li>second</li>
     <li>third</li>
     <li>fourth</li>
     <li>fifth</li>
</ul>

JS:

// 不好的方式:
// $('#pancakes li').eq(0).remove();
// $('#pancakes li').eq(1).remove();
// $('#pancakes li').eq(2).remove();
// ------------------------------------
// 推荐的方式:
var pancakes = $('#pancakes li');
pancakes.eq(0).remove();
pancakes.eq(1).remove();
pancakes.eq(2).remove();
// ------------------------------------
// 或者:
// pancakes.eq(0).remove().end()
// .eq(1).remove().end()
// .eq(2).remove().end();

Definieren Sie eine wiederverwendbare Funktion

Gehen Sie direkt zum Beispiel:

HTML：
<button id="menuButton" >Show Menu!</button>
<a href="#" id="menuLink" >Show Menu!</a>

JS:

//Bad: 
//这个会导致多个回调函数的副本占用内存
$('#menuButton, #menuLink' ). click(function(){
// ...
});
//----------------------------------------------
//Better
function showMenu(){
alert('Showing menu!' );
// Doing something complex here
}
$('#menuButton' ). click(showMenu);
$('#menuLink' ). click(showMenu);

Wenn Sie eine Inline-Callback-Funktion mit einem jQuery-Objekt definieren, das mehrere Elemente enthält (wie im ersten Beispiel oben), wird für jedes Element in der Sammlung eine Callback-Funktion im Speicher gespeichert.

Array-Methode zum Durchlaufen der jQuery-Objektsammlung verwenden

Sie haben es vielleicht nicht bemerkt, aber diese elegante Implementierung der jQuery-Methode geht mit Kosten in Bezug auf die Leistung einher. Es gibt eine schnellere Möglichkeit, ein jQuery-Objekt zu durchlaufen. Es wird über ein Array implementiert. Die jQuery-Objektsammlung ist ein Array-ähnliches Objekt mit Längen- und Wertattributen. Sie können die Leistung über das Programm testen:

HTML:

<ul id="testList" >
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li> 
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <!-- add 50 more -->
</ul>

JS:

var arr = $('li'),
  iterations = 100000;
//------------------------------
// Array实现：  
console.time('Native Loop');
for (var z = 0; z < iterations; z++) {
  var length = arr.length;
  for (var i = 0; i < length; i++) {
    arr[i];
  }
}
console.timeEnd('Native Loop');
//------------------------------
// each实现：  
console.time('jQuery Each');
for (z = 0; z < iterations; z++) {
  arr.each(function(i, val) {
    this;
  });
}
console.timeEnd('jQuery Each');

Ergebnis:

Sie können sehen, dass die Durchquerung der Array-Implementierung eine höhere Ausführungseffizienz aufweist.

//------------------------------------------------ -------Kontinuierliche Updates...

Das Obige ist eine Zusammenfassung einiger gesammelter Erkenntnisse. Wenn Sie Vorschläge oder Fragen haben, hinterlassen Sie bitte eine Nachricht zur Diskussion.