Résumé des méthodes d'optimisation des performances du code jQuery

Cette fois, je vous apporte le code jQueryOptimisation des performancesUn résumé des méthodes, quelles sont les précautions pour l'optimisation des performances du code jQuery, ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Utilisez toujours #id pour rechercher un élément.

Le sélecteur le plus rapide dans jQuery est le sélecteur d'ID ($('#someid')) . il correspond directement à la méthode getElementById() de JavaScript.
Sélection d'un seul élément

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

Une façon de sélectionner un bouton avec des performances médiocres :

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

À la place, sélectionnez directement le bouton :

var traffic_button = $('#traffic_button');

Sélectionner plusieurs éléments

Lorsque nous discutons de la sélection de plusieurs éléments, ce que nous devons vraiment savoir, c'est que le parcours et le bouclage du DOM sont à l'origine de faibles performances. Pour minimiser la perte de performances, utilisez toujours l'ID parent le plus proche à rechercher.

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

2. Utilisez des balises devant les classes

Le deuxième sélecteur le plus rapide de jQuery est le sélecteur de balises ($('head')). c'est parce qu'il correspond directement à la méthode getElementsByTagName() de JavaScript.

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

Ajoutez toujours un nom de balise devant une classe (pensez à le transmettre depuis un identifiant)

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

Remarque : dans jQuery, le sélecteur de classe est le la plupart Un sélecteur lent ; dans IE, il boucle l'intégralité du DOM. Essayez d'éviter de l'utiliser si possible. N'ajoutez pas de balises devant l'ID. Par exemple, cela sera très lent car il parcourt tous les éléments

pour trouver le

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

Dans le même esprit, la transmission de plusieurs identifiants est redondante.

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

3. Mise en cache des objets jQuery

Prenez l'habitude de sauvegarder les objets jQuery dans une variable (comme l'exemple ci-dessus). Par exemple, au lieu de faire ceci :

$('#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');

Au lieu de cela, enregistrez la variable jQuery dans une variable locale avant de continuer votre travail.

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');

Conseil : utilisez le préfixe $ pour indiquer que notre variable locale est un ensemble de packages jQuery. N'oubliez pas de ne pas répéter les opérations de sélection jQuery plus d'une fois dans votre application. Astuce bonus : stockage paresseux des résultats des objets jQuery.

Si vous souhaitez utiliser des objets de résultat jQuery ailleurs dans votre programme, ou si votre fonction est exécutée plusieurs fois, mettez-la en cache dans un objet de portée globale à l'intérieur. En définissant un conteneur global pour contenir les objets de résultat jQuery, vous pouvez le référencer dans d'autres fonctions.

// 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. Meilleure utilisation des chaînes

L'exemple précédent peut aussi s'écrire ainsi :

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

Cela nous permet de écrivez moins de code, ce qui rend JavaScript plus léger.

5. Utiliser des sous-requêtes

jQuery nous permet d'attacher d'autres sélecteurs à un ensemble de packages. Étant donné que nous avons enregistré l'objet parent dans une variable locale, cela réduira la surcharge de performances du sélecteur à l'avenir.

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

Par exemple, nous pouvons utiliser des sous-requêtes pour mettre en cache les lumières actives et inactives pour des opérations ultérieures.

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

Astuce : Vous pouvez définir plusieurs variables locales à la fois séparées par des virgules, ce qui peut économiser quelques octets.

6. Limiter les opérations DOM directes

La méthode de base du fonctionnement DOM consiste à créer une structure DOM en mémoire, puis à mettre à jour la structure DOM. Ce n'est pas la meilleure approche pour jQuery, mais elle est efficace pour JavaScript. La manipulation directe des structures DOM présente de faibles performances. Par exemple, si vous devez créer dynamiquement une liste d'éléments, ne faites pas ceci :

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>');
}

Au lieu de cela, nous voulons créer un ensemble d'éléments dans une chaîne avant de les insérer dans la structure DOM.
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);

Un moyen plus rapide, nous devrions toujours inclure de nombreux éléments dans un nœud parent avant de l'insérer dans la structure DOM

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);

Si vous suivez ce qui précède Si vous êtes toujours confus quant aux performances après l'avoir fait, vous pouvez vous référer à ce qui suit :

* Essayez la méthode Clone() fournie par jQuery. La méthode Clone() crée une copie du numéro de nœud et vous pouvez ensuite effectuer des opérations sur cette copie.

* Utilisez DOM DocumentFragments. Comme le souligne le créateur de jQuery, c'est plus performant que de manipuler directement le DOM. Créez d'abord la structure dont vous avez besoin (comme nous l'avons fait ci-dessus avec une chaîne), puis utilisez l'insertion de jQuery. ou remplacez les méthodes.

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标签关闭之前包含以下代码