Heim > Artikel > Web-Frontend > Zusammenfassung der Methoden zur Leistungsoptimierung von jQuery-Code

Zusammenfassung der Methoden zur Leistungsoptimierung von jQuery-Code

php中世界最好的语言Original: 2018-04-23 15:30:171427Durchsuche

Dieses Mal bringe ich Ihnen jQuery-CodeLeistungsoptimierung Zusammenfassung der Methoden, welche Vorsichtsmaßnahmen für die Leistungsoptimierung von jQuery-Code gelten, das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

1. Verwenden Sie immer #id, um Elemente zu finden.

Der schnellste Selektor in jQuery ist der ID-Selektor ($('#someid')). Es wird direkt der getElementById()-Methode von JavaScript zugeordnet.
Auswählen eines einzelnen Elements

<p id="content">
 <form method="post" action="/">
  <h2>Traffic Light</h2>
  <ul id="traffic_light">
   <li><input type="radio" class="on" name="light" value="red" /> Red</li>
   <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
   <li><input type="radio" class="off" name="light" value="green" /> Green</li>
  </ul>
  <input class="button" id="traffic_button" type="submit" value="Go" />
 </form>
</p>

Eine Möglichkeit, eine Schaltfläche mit schlechter Leistung auszuwählen:

var traffic_button = $('#content .button');

Wählen Sie stattdessen die Schaltfläche direkt aus:

var traffic_button = $('#traffic_button');

Mehrere Elemente auswählen

Wenn wir über die Auswahl mehrerer Elemente sprechen, müssen wir wirklich wissen, dass DOM-Durchquerung und Schleifen die Ursache für geringe Leistung sind. Um Leistungseinbußen zu minimieren, verwenden Sie bei der Suche immer die nächstgelegene übergeordnete ID.

var traffic_lights = $('#traffic_light input');

2. Verwenden Sie Tags vor Klassen

Der zweitschnellste Selektor in jQuery ist der Tag-Selektor ($('head')). liegt daran, dass es direkt der JavaScript-Methode getElementsByTagName() zugeordnet wird.

<p id="content">
 <form method="post" action="/">
  <h2>Traffic Light</h2>
  <ul id="traffic_light">
   <li><input type="radio" class="on" name="light" value="red" /> Red</li>
   <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
   <li><input type="radio" class="off" name="light" value="green" /> Green</li>
  </ul>
  <input class="button" id="traffic_button" type="submit" value="Go" />
 </form>
</p>

Fügen Sie immer einen Tag-Namen vor einer Klasse hinzu (denken Sie daran, ihn von einer ID zu übergeben)

var active_light = $('#traffic_light input.on');

Hinweis: In jQuery ist der Klassenselektor der Die meisten sind ein langsamer Selektor; im IE durchläuft er das gesamte DOM. Vermeiden Sie die Verwendung nach Möglichkeit. Fügen Sie vor der ID keine Tags hinzu. Zum Beispiel wird es sehr langsam sein, weil es alle

-Elemente durchläuft, um das

-Element zu finden.

var content = $('p#content');

Ebenso ist die Weitergabe von mehreren IDs überflüssig.

var traffic_light = $('#content #traffic_light');

3. jQuery-Objekte zwischenspeichern

Machen Sie es sich zur Gewohnheit, jQuery-Objekte in einer Variablen zu speichern (wie im obigen Beispiel). Anstatt beispielsweise Folgendes zu tun:

$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');

Speichern Sie stattdessen die jQuery-Variable in einer lokalen Variablen, bevor Sie mit Ihrer Arbeit fortfahren.

var $active_light = $('#traffic_light input.on');
 
$active_light.bind('click', function(){...});
 
$active_light.css('border', '3px dashed yellow');
 
$active_light.css('background-color', 'orange');
 
$active_light.fadeIn('slow');

Tipp: Verwenden Sie das Präfix $, um anzugeben, dass unsere lokale Variable ein jQuery-Paketsatz ist. Denken Sie daran, jQuery-Auswahlvorgänge in Ihrer Anwendung nicht mehr als einmal zu wiederholen. Bonus-Tipp: Lazy Storage von jQuery-Objektergebnissen.

Wenn Sie jQuery-Ergebnisobjekte an anderer Stelle in Ihrem Programm verwenden möchten oder Ihre Funktion mehrmals ausgeführt wird, speichern Sie sie in einem darin enthaltenen global gültigen Objekt zwischen. Durch die Definition eines globalen Containers zur Aufnahme von jQuery-Ergebnisobjekten können Sie in anderen Funktionen darauf verweisen.

// Define an object in the global scope (i.e. the window object)
window.$my ={
 // Initialize all the queries you want to use more than once
 head : $('head'),
 traffic_light : $('#traffic_light'),
 traffic_button : $('#traffic_button')};
function do_something(){
 // Now you can reference the stored results and manipulate them
 var script = document.createElement('script');
 $my.head.append(script);
 // When working inside functions, continue to save jQuery results
 // to your global container.
 $my.cool_results = $('#some_ul li');
 $my.other_results = $('#some_table td');
 // Use the global functions as you would a normal jQuery result
 $my.other_results.css('border-color', 'red');
 $my.traffic_light.css('border-color', 'green');
}

4. Bessere Ausnutzung von Ketten

Das vorherige Beispiel kann auch so geschrieben werden:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...})
 .css('border', '3px dashed yellow')
 .css('background-color', 'orange')
 .fadeIn('slow');

Dies ermöglicht uns Schreiben Sie weniger Code, wodurch JavaScript leichter wird.

5. Verwendung von Unterabfragen

jQuery ermöglicht es uns, andere Selektoren an einen Paketsatz anzuhängen. Da wir das übergeordnete Objekt in einer lokalen Variablen gespeichert haben, wird dies den Leistungsaufwand für den Selektor in Zukunft verringern.

<p id="content">
 <form method="post" action="/">
  <h2>Traffic Light</h2>
  <ul id="traffic_light">
   <li><input type="radio" class="on" name="light" value="red" /> Red</li>
   <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
   <li><input type="radio" class="off" name="light" value="green" /> Green</li>
  </ul>
  <input class="button" id="traffic_button" type="submit" value="Go" />
 </form>
</p>

Zum Beispiel können wir Unterabfragen verwenden, um aktive und inaktive Lichter für spätere Vorgänge zwischenzuspeichern.

var $traffic_light = $('#traffic_light'), 
$active_light = $traffic_light.find('input.on'), 
$inactive_lights = $traffic_light.find('input.off');

Tipp: Sie können mehrere lokale Variablen gleichzeitig durch Kommas getrennt definieren, wodurch einige Bytes eingespart werden können.

6. Begrenzen Sie direkte DOM-Operationen

Die grundlegende Methode der DOM-Operation besteht darin, eine DOM-Struktur im Speicher zu erstellen und diese dann zu aktualisieren. Dies ist nicht der beste Ansatz für jQuery, aber für JavaScript effizient. Die direkte Bearbeitung von DOM-Strukturen weist eine geringe Leistung auf. Wenn Sie beispielsweise dynamisch eine Liste von Elementen erstellen müssen, tun Sie dies nicht:

var top_100_list = [...], // assume this has 100 unique strings 
$mylist = $('#mylist'); // jQuery selects our <ul> element
for (var i=0, l=top_100_list.length; i<l; i++){ 
 $mylist.append('<li>' + top_100_list[i] + '</li>');
}

Stattdessen möchten wir eine Reihe von Elementen in einer Zeichenfolge erstellen, bevor wir sie in die DOM-Struktur einfügen.
Code

var top_100_list = [...], // assume this has 100 unique strings 
$mylist = $('#mylist'), // jQuery selects our <ul> element 
top_100_li = ""; // This will store our list items
for (var i=0, l=top_100_list.length; i<l; i++){
 top_100_li += '<li>' + top_100_list[i] + '</li>';
}
$mylist.html(top_100_li);

Eine schnellere Möglichkeit: Wir sollten immer viele Elemente in einen übergeordneten Knoten einschließen, bevor wir sie in die DOM-Struktur einfügen.

var top_100_list = [...], // assume this has 100 unique strings 
$mylist = $('#mylist'), // jQuery selects our <ul> element 
top_100_ul = '<ul id="#mylist">'; // This will store our entire unordered list
for (var i=0, l=top_100_list.length; i<l; i++){
 top_100_ul += '<li>' + top_100_list[i] + '</li>';
}
top_100_ul += '</ul>'; // Close our unordered list
$mylist.replaceWith(top_100_ul);

Wenn Sie die oben genannten Schritte befolgen Wenn Sie nach der Ausführung immer noch unsicher über die Leistung sind, können Sie sich auf Folgendes beziehen:

* Probieren Sie die von jQuery bereitgestellte Clone()-Methode aus. Die Methode Clone() erstellt eine Kopie der Knotennummer, und Sie können dann Operationen an dieser Kopie ausführen.

* Wie der Ersteller von jQuery betont, ist es leistungsfähiger, als zuerst die benötigte Struktur zu erstellen (wie wir es oben mit einer Zeichenfolge getan haben) und dann die Einfügung von jQuery zu verwenden oder Methoden ersetzen.

7、事件委托（又名：冒泡事件）

除非特别说明，每一个JavaScript事件（如click, mouseover 等）在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是你可以只对它们的父级绑定一次，而且可以计算出是哪一个节点触发了事件，而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如，假如我们要开发一个包含很多input的大型form，当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的：

$('#myList li).bind('click', function(){
 $(this).addClass('clicked'); // do stuff
});

反而，我们应该在父级侦听click事件。

$('#myList).bind('click', function(e){
 var target = e.target, // e.target grabs the node that triggered the event.
  $target = $(target); // wraps the node in a jQuery object
 if (target.nodeName === 'LI') {
  $target.addClass('clicked');  // do stuff
 }
});

父节点担当着发报机的工作，可以在触发了事件的目标element上做一些工作。如果你发现自己把一个event listener帮定到很多个element上，那么你这种做法是不正确的。

8、消除查询浪费

虽然jQuery对没有找到任何匹配的elements处理的很好，但是它还是需要花费时间去查找的。如果你的站点有一个全局的JavaScript，你可能会把每个jQuery function都放在 $(document).ready(function(){ // all my glorious code })里。不要这样做。只去放一些页面上适合用到的function。这样做最有效的方式是你的模板可以完全控制任何时候或者地方执行JavaScript以内联脚本的方式初始化function。例如，在你的“article”页面模板里，你可能在body标签关闭之前包含以下代码