Sept choses à faire pour améliorer les performances de jQuery_jquery

Faites sept choses pour vous aider à améliorer les performances de jQuery Voulez-vous savoir lesquelles ?

1. Ajouter en dehors des boucles

Tout ce qui implique le DOM a un prix. Si vous ajoutez de nombreux éléments au DOM, vous souhaiterez les ajouter tous en même temps plutôt que de le faire plusieurs fois. Un problème courant survient lors de l’ajout d’éléments à une boucle.

$.each( myArray, function( i, item ) {

  var newListItem = "<li>" + item + "</li>";
 
 $( "#ballers" ).append( newListItem );
 });

Une technique courante consiste à utiliser des fragments de documents. À chaque itération de la boucle, ajoutez l'élément au fragment au lieu de l'élément DOM. Lorsque la boucle se termine, ajoutez le fragment à l'élément DOM.

var frag = document.createDocumentFragment();

$.each( myArray, function( i, item ) {

  var newListItem = document.createElement( "li" );
  var itemText = document.createTextNode( item );

  newListItem.appendChild( itemText );

  frag.appendChild( newListItem );

});

$( "#ballers" )[ 0 ].appendChild( frag );

Une autre astuce simple consiste à construire continuellement une chaîne à chaque itération de la boucle. Lorsque la boucle se termine, définissez le code HTML de l'élément DOM sur cette chaîne.

var myHtml = "";

$.each( myArray, function( i, item ) {

  myHtml += "<li>" + item + "</li>";

});

$( "#ballers" ).html( myHtml );

Bien sûr, il existe d'autres techniques que vous pouvez essayer. Un site appelé jsperf constitue un bon moyen de tester ces propriétés. Le site vous permet de comparer chaque technique et de visualiser ses résultats de performances multiplateformes.

2. Longueur du cache pendant les boucles

Dans la boucle for, n'accédez pas à la propriété length du tableau à chaque fois ;

var myLength = myArray.length;

for ( var i = 0; i < myLength; i++ ) {

  // do stuff

}

3. Détachez les éléments pour travailler avec eux

La manipulation du DOM est lente, vous voulez donc le faire avec le moins d'alignement possible. jQuery a introduit une méthode appelée detach() dans la version 1.4 pour aider à résoudre ce problème, qui vous permet de détacher des éléments du DOM lorsque vous les utilisez.

var $table = $( "#myTable" );
var $parent = $table.parent();

$table.detach();

// ... add lots and lots of rows to table

$parent.append( $table );

4. N'agissez pas sur les éléments absents

Si vous prévoyez d'exécuter beaucoup de code sur un sélecteur vide, jQuery ne vous donnera aucune indication - il continuera à s'exécuter comme si aucune erreur ne s'était produite. A vous de vérifier combien d'éléments contient le sélecteur.

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();

// Better:
var $mySelection = $( "#nosuchthing" );

if ( $mySelection.length ) {

  $mySelection.slideUp();

}

// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {

  this.length && func.apply( this );

  return this;

}

$( "li.cartitems" ).doOnce(function() {


  // make it ajax! \o/


});

Ce guide est particulièrement utile pour les widgets jQuery UI qui nécessitent beaucoup de temps système lorsque le sélecteur ne contient pas d'élément.

5. Optimiser les sélecteurs

L'optimisation du sélecteur n'est pas aussi importante que par le passé, car de nombreux navigateurs implémentent la méthode document.querySelectorAll() et jQuery transfère la charge du sélecteur vers le navigateur. Mais il y a quand même quelques conseils à garder à l’esprit.

Sélecteur basé sur l'ID

Il est toujours préférable de démarrer votre sélecteur avec un identifiant.

// Fast:
 $( "#container div.robotarm" );
 
 // Super-fast:
 $( "#container" ).find( "div.robotarm" );

L'utilisation de la méthode .find() sera plus rapide car le premier sélecteur a été traité sans passer par le moteur de sélection bruyant - les sélecteurs ID-Only utilisent déjà la méthode document.getElementById() Le traitement est rapide car il est natif de le navigateur.

Spécificité

Décrivez le côté droit du sélecteur de manière aussi détaillée que possible, et faites l'inverse pour le côté gauche.

// Unoptimized:
$( "div.data .gonzalez" );
 
// Optimized:
 $( ".data td.gonzalez" );

Essayez d'utiliser la forme tag.class pour décrire le sélecteur situé à l'extrême droite du sélecteur, et essayez d'utiliser uniquement tag ou .class sur le côté gauche.

Éviter la surutilisation de la spécificité

 $( ".data table.attendees td.gonzalez" );
 
 // Better: Drop the middle if possible.
 $( ".data td.gonzalez" );

Opter pour le "DOM" permet toujours d'améliorer les performances du sélecteur car le moteur de sélection n'a pas besoin de faire autant d'itérations lors de la recherche d'éléments.

Évitez d'utiliser des sélecteurs génériques

Les performances seront grandement affectées si un sélecteur correspond explicitement ou implicitement à une plage non définie.

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
 
 $( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.
复制代码
6. Use Stylesheets for Changing CSS on Many Elements

Si vous utilisez la méthode .css() pour modifier le CSS de plus de 20 éléments, vous devriez envisager d'ajouter une balise de style à la page comme alternative. Cela peut augmenter la vitesse de près de 60 %.

// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );

// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
  .appendTo( "head" );

7. Ne traitez pas jQuery comme une boîte noire

Voici les sept choses que vous devez faire pour améliorer les performances de jQuery. C'est clair !