Optimiser votre code JavaScript, CSS et HTML

Synthèse

L'optimisation de la programmation est une tâche importante de la Boîte à outils de l'expérience Web maintenant qu'elle adopte une approche mobilité d'abord dans la version 4.0. Là où la programmation molle pourrait avoir un impact minimal sur les performances dans un fureteur d'ordinateur de bureau, elle peut résulter en des délais vraiment significatifs sur les appreils mobiles. C'est pourquoi une des priorités de la BOEW v4.x est l'optimisation de la performance.

Le cadre de la BOEW v4.x est déjà fortement optimisé en utilisant la minification de code, la consolidation, le scriptage CSS et l'encodage Base64. Tout ca résulte dans une augmentation de la performance significative mais peut encore s'enliser par du code gonflé et mou. Cette page fournie plusieurs conseils pour vous assurer que votre programmation est aussi efficace que possible.

Optimisation du code JavaScript

• Minimiser l'utilisation du jQuery : jQuery peut être d'un grand aide avec la traversée DOM et les scénarios complexes de scrptage mais peut ralentir lorsqu'on travaille avec des scénarios de code simple et direct. Il y a un coût a la performance pour chaque objet jQuery créé et méthode d'emballage jQuery pour les opérations JavaScript de base. Évitez de créer des objets jQuery chaque fois que possible, spécialement dans les boucles.
• Optimiser vos boucles : La boucle la plus rapide en JavaScript est en mémoire tampon pour boucles (longueur en mémoire tampon en dehors de la boucle). Évitez d'utiliser des boucles jQuery (p.e., each()) lorsque possible car il y a beaucoup de frais système. Dans le cas d'objets jQuery, utilisez .get() pour accéder à une collection d'objets DOM pour lesquels une condition « while » renversée et mémoire tampon pour boucles peuvent être utilisés. '''En mémoire tampon pour boucle (longueur en mémoire tampon en dehors de la boucle):'''

  var i,
  	len = myArray.length;
  for ( i = 0; i !== len; i += 1 ) {
  
  	// utiliser l'item de la collection
  	console.log( myArray[ i ] );
  }

• « if/else » versus déclarations « switch » : Lorsque vous décidez comment contrôler le flot de votre programmation, il est important de considérer le nombre de conditions à comparer. Si il n'y a qu'une ou deux conditions, les déclarations « if/else » sont généralement plus rapides. Cependant, lorsque vous avez 3 conditions ou plus à comparer, une déclaration « switch » est l'option la plus rapide. Vos déclarations « if/else » et « switch » devraient aussi être organisées pour que les conditions les plus communes apparaissent au haut du bloc de déclaration « if/else » ou « switch » (Voir jsPerf if/else versus switch test case).
• Éléments DOM en mémoire tampon, objets jQuery et valeurs objet/collection : Il y a beaucoup de frais système à faire des recherches DOM, créer des objets jQuery, et retrouver des valeurs objet/collection. Minimisez l'impact en ajoutant à la mémoire tampon les résultats où ces résultats seront utilisés plus d'une fois. Il est préférable d'emmagasiner ces résultats dans des variables locales et de réutiliser ces variables.
• Minimiser le refoulement : Chaque modification apportée au DOM a un coût significatif à la performace car elle le refoulement de page. Minimisez ce coût en effectuant tout les changements dans une seule opération pour actionner le refoulement qu'une seule fois plutôt que plusieurs opérations qui activent le refoulement plusieurs fois. Ca peut être effectuer de la manière suivante :
  • Mettre tout les changements dans une chaîne de caractères ou objet et ensuite le joindre au DOM ou remplacer en partie le DOM avec cette chaîne de caractères ou objet.
  • Détachez un élément du DOM, apportez-y le changement, réattachez le ensuite au DOM.
• Éviter les recherches DOM globales : Le coût à la performance est beaucoup plus grand lorsqu'on recherche le DOM au complet plutôt que de rechercher seulement une partie de celui-ci. Si vous avez déjà une recherche en mémoire tampon, veuillez en prendre avantage et recherchez de ce point plutôt que de rechercher le DOM au complet à nouveau. Par exemple si vous avez déjà la recherche pour la classe .button en mémoire tampon dans la variable $buttons, faites alors $buttons.find( "a.mybutton" ) pour trouver les éléments a plutôt que $( "a.mybutton" ). Lorsque possible, utilisez du JavaScript natif pour rechercher tel que getElementById et getElementsByTagName.
• Recherches DOM optimisées tout d'adord, filtrage ensuite: Les recherches DOM les plus rapides en JavaScript sont par id et nom de balise à cause des fonctions JavaScript natives getElementById et getElementsByTagName. Prenez avantage de cette performance en exécutant d'abord des recherches optimisées et filtrez ensuite. Par exemple, au lieu de .find( "a[href=*'url_fragment']" ) effectuez .find( "a" ).filter( "[href=*'url_fragment']" ).
• Combiner de multiples événements à un élément : Lorsque vous combinez de multiples événements à un élément, il est plus rapide de combiner tous les événements a un seul gestionnaire d'événement. Vous pouvez utiliser la propriété type de l'événement pour déterminer quel événement a été activé (see the jsPerf handling multiple events test case).

  // Plus rapide : un seul gestionnaire d'événement pour les deux événements
  $( "#elem" ).on( "mouseover mouseout", function( event ) {
  	if ( event.type === "mouseover" ) {
  
  		// mouseover
  	} else {
  
  		// mouseout
  	}
  });
  
  // Plus lent: séparer le gestionnaire d'événement pour chaque événement
  var $elem = $( "#elem" );
  $elem.on( "mouseover", function( event ) {
  
  	// mouseover
  });
  $elem.on( "mouseout", function( event ) {
  
  	// mouseout
  });

var test = ( new Date() ).getTime();
// Code à tester
console.log( ( new Date() ).getTime() - test );

Optimisation de code CSS

• Minimiser les noms de classe CSS : les noms de classe CSS sont souvent réutilisées de multiple fois à l'intérieur des fichiers CSS et HTML pour pouvoir ajouter rapidement en vrac aux fichiers si ils sont longs are inutilement long. Gardez les noms de classe aussi courts que possible tout en s'assurant qu'ils restent unique. Un exercice de réduction des noms de classe d'un cadre de la BOEW récent a permis de réduire la taille de fichier de 10% à 30%.

Optimisation du code HTML

• Minimiser l'utilisation de commentaires HTML : chaque kilooctet compte lorsqu'il est question d'appareils mobiles, alors évitez de gonfler inutilement votre code avec des commentaires HTML. Gardez les commentaires à un strict minimum en éliminant les commentaires inutiles et réduisant le reste.
• Retirer le code marquer en commentaire : Le code marquer en commentaire ne devrait pas être laissé dans les pages Web en production. Le code marqué en commentaire peut facilement ajouter plusieurs kilooctets inutiles aux téléchargements. Gardez le code inutilisé séparé des pages Web en production.
• Utiliser la tabulation plutôt que la barre d'espacement pour espacer votre code : Il faut en général 5 caractères d'espacement pour égaler l'espacement d'une tabulation. Une réduction significative de taille de fichier peut être accomplie en utilisant la tabulation plutôt que la barre d'espacement. Plusieurs outils d'édition permettent de facilement passé à l'espacement par tabulation.
• Minimiser l'espacement: L'espacement est pratique pour la clarté du code mais peut rapidement ajouter à la taille du fichier HTML. Trouvez un bon équilibre entre la clarté de code et la taille de fichier pour minimiser l'impact sur l'utilisateur final.
• Retirer l'attribut type des éléments script : En HTML5, type="text/javascript" n'est plus requis sur les éléments script. Utilisez l'attribut type seulement sur les éléments script pour les scénarios non-JavaScript.
• Retirer l'attribut type des éléments style : En HTML5, type="text/css" n'est plus requis sur les éléments style. Utilisez seulement l'attribut type sur les éléments style pour des scénarios non-CSS.

Optimisation de serveur Web

• Autoriser la compression Gzip sur votre serveur Web. La compression Gzip peut réduire la taille de transfert jusqu'à 70%. ''Note :''' La compression Gzip ne réduit pas l'impact sur la taille de la mémoire tampon de l'utilisateur final (mémoire tampon non-comprimée) alors la taille des fichiers devrait être réduite autant que possible avant la compression Gzip.