Analyse des techniques d'optimisation des performances jQuery_jquery

Cet article analyse plus en détail les techniques d'optimisation des performances de jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Utilisez la dernière version de la bibliothèque de classes jQuery

La nouvelle version de jQuery aura des corrections de bugs et quelques optimisations par rapport à la version précédente. Cependant, il convient de noter qu'après avoir changé de version, n'oubliez pas de tester votre code. Après tout, il arrive parfois qu'il ne soit pas entièrement. rétrocompatible.

2. Utilisez les sélecteurs appropriés

Les meilleures et les pires performances des sélecteurs jQuery sont les suivantes :

sélecteur d'identifiant, tel que $('#id', context)
Sélecteur de balises, tel que $('p', context)
sélecteur de classe, tel que $('.class', context)
Sélecteur d'attribut, tel que $('[attribute=value]', context)
Sélecteur de pseudo-classe, tel que $(':hidden', context)

Supplément et notes :

Essayez de spécifier le contexte du sélecteur afin de restreindre la portée des éléments positionnés
Évitez les modifications répétées de l'identifiant : var $el = $('#list #item1')
Évitez les balises ou les classes modifiant les identifiants, code d'erreur : var $el = $('ul #item1')
Si vous utilisez un sélecteur d'attribut, essayez de spécifier le sélecteur de balise pour accélérer l'accès. Code correct : var $el = $('a[title="link"]')

.

3. Objet cache

Voici comment obtenir de mauvais résultats :

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

Remarque : jQuery effectuera une recherche dans le DOM pendant le processus de création de chaque sélecteur, ce qui consomme du temps et des performances.

Meilleure façon :

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

Remarque : Ne laissez jamais le même sélecteur apparaître plusieurs fois dans votre code.

4. Fonctionnement DOM pendant la boucle

En utilisant jQuery, vous pouvez facilement ajouter, supprimer ou modifier des nœuds DOM, mais lors du traitement des nœuds dans certaines boucles, comme for(), while() ou $.each(), il y a un exemple ci-dessous qui mérite votre attention :

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

Remarque : ajoutez des nœuds li 100 fois dans une boucle. Cette opération consomme beaucoup de performances, donc une meilleure façon est de créer tous les nœuds à ajouter avant de les insérer dans l'arborescence DOM, puis de les ajouter au DOM. arbre à la fois. Meilleure façon :

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

5. Utiliser des objets jQuery dans un tableau

Utilisez le sélecteur jQuery pour obtenir le résultat qui est un objet jQuery. En termes de performances, il est recommandé d'utiliser une simple boucle for ou while au lieu de $.each(), ce qui peut rendre votre code plus rapide.

Remarque également : vérifier la longueur est un moyen de vérifier si un objet jQuery existe.

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

6. Agent événementiel

Chaque événement JavaScript (tel qu'un clic, un survol de la souris) remontera jusqu'au nœud parent. Ceci est utile lorsque nous devons appeler la même fonction sur plusieurs éléments.

...
<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() {...});
...

Remarque : de cette façon, s'il y a 100 li, 100 événements seront liés. Évidemment, cela n’est pas scientifique et entraîne de nombreuses pertes de performances.

Une meilleure façon est de lier simplement un événement au nœud parent ul de li une fois, puis de cliquer sur l'élément actuel via event.target.

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

7. Convertissez votre code en plug-in jQuery

Si vous passez du temps à écrire du code jQuery similaire à chaque fois, vous pouvez envisager de transformer ce code similaire en un plug-in, ce qui peut rendre votre code plus réutilisable et vous aider efficacement à organiser votre code.

8. Utilisez le tableau Javascript join() pour épisser des chaînes

Lors du traitement de chaînes longues, l'utilisation de la méthode join() permet d'optimiser les performances.

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

9. Utilisation raisonnable des attributs de données HTML5

L'attribut data de HTML5 peut nous aider à insérer des données, en particulier l'échange de données entre le front-end et le back-end. La méthode data() de jQuery utilise efficacement les attributs HTML5 pour obtenir automatiquement des données.

...
<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. Essayez d'utiliser des méthodes JavaScript natives

Par exemple :

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

Optimisé pour :

this.style.color = 'blue';

Par exemple :

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

Optimisé pour :

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

11. Compresser JavaScript

Compressez les fichiers JavaScript à l'aide d'un outil de compression.
Lors de la publication de votre projet, vous devez utiliser une version « minifiée » de vos fichiers JavaScript.

J'espère que cet article sera utile à la programmation jQuery de chacun.