Conseils avancés pour l'optimisation des performances jquery_jquery

Parfois, lorsque nous écrivons jQuery, pour la commodité d'écrire du code, nous ignorons souvent la pression exercée sur le client lors de l'exécution du programme. À cela s’ajoutent des problèmes tels qu’une vitesse d’exécution lente ou même l’incapacité de s’exécuter sur certains navigateurs ou ordinateurs bas de gamme.

Par conséquent, il nous est nécessaire d'optimiser notre propre code jquery pour obtenir un fonctionnement plus rapide et plus fluide.

Techniques avancées pour l'optimisation des performances jquery. Ce qui suit présente principalement l'optimisation des performances jquery sous sept aspects :

1. Présentez la bibliothèque jQuery via CDN (Content Delivery Network)

2. Réduire les opérations DOM

3. Utilisez le JS natif de manière appropriée

4. Optimisation du sélecteur

5. Mise en cache des objets jQuery

6. Définir une fonction réutilisable

7. Utilisez la méthode tableau pour parcourir la collection d'objets jQuery

Les instructions spécifiques à chaque méthode sont expliquées ci-dessous :

Présentation de la bibliothèque jQuery via CDN (Content Delivery Network)

L'étape la plus simple pour améliorer les performances de JavaScript sur votre site Web consiste à introduire la dernière version de la bibliothèque jQuery. La version nouvellement publiée offre généralement de meilleures améliorations de performances et corrige certains bugs. Ou l’introduire via CDN est également un bon choix. L’introduction via CDN peut réduire le temps de chargement du site Web.

Voici quelques services CDN :

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

Certains services CDN nationaux :

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/

Réduire les opérations DOM

Bien que les performances de JavaScript aient été considérablement améliorées, les opérations DOM sont toujours très gourmandes en ressources et les opérations DOM doivent être réduites. Ceci est particulièrement important lors de l'insertion d'un grand nombre d'éléments dans une page.

Par exemple :

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

Mettre en cache tous les éléments et les insérer une fois améliorera les performances car une seule refonte de la page est déclenchée. Il en va de même pour les propriétés de style CSS.

Plus de lecture : La page frontale est bloquée ? Cela peut être dû aux opérations DOM, vous devez optimiser le code

Utiliser le JS natif de manière appropriée

La création d'objets jQuery entraîne une certaine surcharge. Par conséquent, si les performances sont plus importantes, utilisez autant que possible le javascript natif. À certains égards, cela pourrait être plus facile à comprendre et nécessiter moins de code à écrire. Par exemple :

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

Optimisation du sélecteur

Si vous avez besoin de meilleures performances mais que vous souhaitez quand même utiliser jQuery, vous pouvez essayer une optimisation du sélecteur jQuery. Ce qui suit est un programme de test qui enregistre le temps d'exécution de différents sélecteurs via les méthodes console.time et console.timeEnd de la console du navigateur.

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

Résultat de l'exécution :

Mise en cache des objets jQuery

Chaque fois qu'un nouvel objet jQuery est construit via un sélecteur, le moteur Sizzle au cœur de jQuery traversera le DOM et fera correspondre l'élément dom réel via le sélecteur correspondant. Cette méthode est relativement inefficace. Dans les navigateurs modernes, vous pouvez utiliser la méthode document.querySelector pour faire correspondre l'élément correspondant en passant le paramètre Class correspondant. Cependant, les versions inférieures à IE8 ne prennent pas en charge cette méthode. Une pratique pour améliorer les performances consiste à mettre en cache les objets jQuery via des variables. Par exemple :

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

Définir une fonction réutilisable

Aller directement à l'exemple :

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

Si vous définissez une fonction de rappel en ligne avec un objet jQuery contenant plusieurs éléments (comme dans le premier exemple ci-dessus), une fonction de rappel sera enregistrée en mémoire pour chaque élément de la copie de la collection.

Utilisez la méthode tableau pour parcourir la collection d'objets jQuery

Vous ne l'avez peut-être pas remarqué, mais cette implémentation élégante de la méthode jQuery each a un coût en termes de performances. Il existe un moyen plus rapide de parcourir un objet jQuery. Il est implémenté via un tableau. La collection d'objets jQuery est un objet de type tableau avec des attributs de longueur et de valeur. Vous pouvez tester les performances via le programme :

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

Résultat :

Vous pouvez voir que la traversée via l'implémentation d'un tableau a une efficacité d'exécution plus élevée.

//------------------------------------------------ -------Mises à jour continues...

Ce qui précède est un résumé de certaines connaissances collectées. Si vous avez des suggestions ou des questions, veuillez laisser un message pour discussion.