Optimisation de code – comment faire perdre du poids aux pages – le javascript – 3/5

Charger les contenus tiers en asynchrone

Qui n’a jamais chargé un contenu tiers (une vidéo Youtube ou un bouton Tweeter) ?

Le gros problème c’est que ces codes ne sont pas toujours délivrés de façon efficace, que ce soit par la connexion de l’utilisateur, ou par la connexion du serveur où ils sont hébergés. Ce service peut également être temporairement indisponible ou même être bloqué par l’utilisateur ou par le pare-feu de son entreprise.

Pour éviter que cela ne devienne un enjeu crucial lors du chargement d’un site, verrouiller le chargement de la page entière, et chargez toujours ces codes de manière asynchrone (ou utilisez les iFrames amicales ).

var script = document.createElement('script'),
    scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);

> Vidéo: comparaison d’une page normale avec une page où le contenu tiers est accessible en asynchrone .

Les longueurs des tableaux

La boucle est sans aucun doute l’un des éléments les plus importants liés à la performance avec JavaScript. Essayez d’optimiser la logique à l’intérieur d’une boucle de telle sorte que chaque itération soit effectuée de manière efficace.

Une façon de le faire est de stocker la taille du tableau qui sera couvert, de sorte qu’il n’a pas besoin d’être recalculé à chaque fois que la boucle est itérée.

var arr = new Array(1000);

for (var i = 0; i < arr.length; i++) {
  // Bad - size needs to be recalculated 1000 times
}

for (var i = 0, len = arr.length; i < len; i++) {
  // Good - size is calculated only 1 time and then stored
}

> Résultats des JSPerf

> Remarque: Bien que les moteurs modernes des navigateurs optimisent automatiquement ce processus, il reste encore une bonne pratique en fonction des navigateurs existants qui persistent.

Dans les collections sous forme de liste de nœuds ( NodeList ) générés par exemple par document.getElementsByTagName('a') ceci est particulièrement critique. Ces collections sont considérées comme «en direct», c’est à dire qu’elles sont automatiquement mises à jour lorsque des modifications sont apportées à l’élément auquel le noeud appartient.

var links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
  // Bad - each iteration the list of links will be recalculated to see if there was a change
}

for (var i = 0, len = links.length; i < len; i++) {
  // Good - the list size is first obtained and stored, then compared each iteration
}

// Terrible: infinite loop example
for (var i = 0; i < links.length; i++) {
  document.body.appendChild(document.createElement('a'));
  // each iteration the list of links increases, never satisfying the termination condition of the loop
  // this would not happen if the size of the list was stored and used as a condition
}

Evitez document.write

L’utilisation de document.write provoque une dépendance à la le chargement de la page pour être complètement chargé.

Cette (mauvaise) pratique  a été aboli depuis des années par les développeurs, mais il y a encore des cas où son utilisation est encore nécessaire, comme dans le cas d’un retour synchrone pour un fichier JavaScript.

Boilerplate HTML5 , par exemple, utilise cette technique pour charger jQuery localement si le CDN de Google ne répond pas.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')
// ]]></script>

> Attention: document.write effectuée pendant ou après l’événement window.onload remplace tout le contenu de la page courante.

<span>foo</span>
<script type="text/javascript">// <![CDATA[
window.onload = function() {
    document.write('<span>bar</span>');
  };
// ]]></script>

Le résultat de la dernière page sera uniquement bar et non foobar comme prévu. La même chose se produit juste après l’événement window.onload.

<span>foo</span>
<script type="text/javascript">// <![CDATA[
setTimeout(function() {
    document.write('<span>bar</span>');
  }, 1000);
  window.onload = function() {
    // ...
  };
// ]]></script>

Le résultat est le même que l’exemple précédent, si la fonction programmée par setTimeout est exécutée après l’événement window.onload .

Minimiser les réajustements d’affichage

Les réajustements sont causées quand il ya un processus de ré-rendu du DOM lorsque certains propriétés ou éléments sont modifiés.

Ils sont déclenchés lorsque l’apparence d’un élément est changé sans changer sa disposition. Nicole Sullivan décrit cela comme un changement de styles tels que la modification d’un background-color .

Ces réajustements sont très côuteux, car ils sont causées en changeant la mise en page,  comme lorsque vous changez la largeur d’un élément.

Il ne fait aucun doute que les réajustements doivent être évités, alors plutôt que de faire:

var myList = document.getElementById("myList");

for (var i = 0; i < 100; i++) {
  myList.innerHTML += "<span>" + i + "</span>";
}

Faites:

var myList = "";

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

document.getElementById("myList").innerHTML = myList;

De cette façon, vous évitez de manipuler le DOM à chaque itération de la boucle, et ne le ferez qu’une seule fois.

> Résultats des JSPerf

Minimisez votre script

Tout comme CSS, afin de maintenir un code lisible, c’est une bonne idée d’écrire des commentaires et d’utiliser des retraits:

BrowserDiet.app = function() {

  var foo = true;

  return {
    bar: function() {
      // do something
    }
  };

};

Mais pour le navigateur, rien de tout cela n’importe réellement. Pour cette raison, n’oubliez pas de diminuer votre javascript grâce à des outils automatisés.

BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}

Cela diminuera la taille du fichier, ce qui entraîne des temps de téléchargements, d’analyse et d’exécution plus rapides, .

> Des outils utiles: YUI Compressor , Google Closure Compiler et UglifyJS .

Combiner les fichiers js multiples en un seul

Une autre bonne pratique pour l’organisation et l’optimisation de son exécution est de les séparer en composants modulaires.

<script type="text/javascript" src="navbar.js"></script><script type="text/javascript" src="component.js"></script>
<script type="text/javascript" src="page.js"></script><script type="text/javascript" src="framework.js"></script>
<script type="text/javascript" src="plugin.js"></script>

Cependant, une requête HTTP est requise pour chacun de ces fichiers (et nous savons que les navigateurs ne pouvent télécharger qu’un nombre limité de ressources en parallèle).

<script type="text/javascript" src="main.js"></script>

Donc pensez à combiner votre JS. Avoir un plus petit nombre de fichiers se traduira par un plus petit nombre de demandes et une page de chargement plus rapide.

Vous voulez avoir le meilleur des deux mondes ? Automatisez ce processus à travers un outil de build.

> Un outil utile: Grunt .

 

JQUERY

Utilisez toujours la dernière version de jquery

L’équipe du noyau de jQuery est toujours à la recherche d’améliorations à sa bibliothèque, à travers une meilleure lisibilité du code, de nouvelles fonctionnalités et l’optimisation des algorithmes existants.

Pour cette raison, utilisez toujours la dernière version de jQuery, qui est toujours disponible ici, si vous voulez la copier dans un fichier local:
http://code.jquery.com/jquery-latest.js
Mais ne faites jamais référence à cette URL dans une balise <script> , car cela pourra vous créer des problèmes dans l’avenir lorsque des versions plus récentes seront automatiquement servi à votre place avant même que vous ayez eu la chance de les tester. Au lieu de cela, préférez un lien vers la dernière version de jQuery dont vous avez besoin.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Tout comme le sage Barney Stinson dit, « La nouveauté vaut toujours mieux » 😛

Les sélecteurs

Les sélecteurs est l’une des questions les plus importantes dans l’utilisation de jQuery. Il ya beaucoup de façons différentes pour sélectionner un élément du DOM, mais cela ne signifie pas qu’ils ont les mêmes performances, vous pouvez sélectionner un élément en utilisant les classes, les ID ou les méthodes comme find () , children () .

Parmi eux tous, sélectionnez un ID est le plus rapide, parce qu’il se base sur un fonctionnement natif du DOM:

$("#foo");

> Résultats des JSPerf

Profitez des méthodes de chaînage

Chaînage signifie que vous pouvez exécuter une méthode jQuery l’une après l’autre, sans avoir besoin de re-spécifier un sélecteur. Presque toutes les méthodes jQuery autorise le chaînage en retournant un objet jQuery.

$("#object").addClass("foo").css("border-color", "#ccc").width(200);

Les tests montrent que la non utilisation du chaînage est plus lente.

$("#object").addClass("foo");
$("#object").css("border-color","#f0f");
$("#object").width(200);

> Résultats des JSPerf

Utilisez for plutôt que each

L’utilisation des fonctions JavaScript natives conduit presque toujours à une exécution plus rapide que ceux de jQuery. Pour cette raison, au lieu d’utiliser la méthode jQuery.each , utilisez JavaScript et ses méthodes de boucle for .

Mais attention, même si for in est natif, dans de nombreux cas le traitement est pire qu’un jQuery.each .

Et l’utilisation de la boucle for nous donne une autre opportunité pour accélérer les choses en mettant en cache la longueur des collections une fois les itérations terminées.

for ( var i = 0, len = a.length; i < len; i++ ) {
    e = a[i];
}

L’utilisation de la boucle while et de la boucle for est un sujet brûlant dans la communauté et sont souvent cités comme les plus rapides sous forme d’itération. Cependant il faut parfois évité afin d’avoir un code plus lisible.

> Résultats des JSPerf

Ne pas utiliser jquery …

… Sauf si c’est absolument nécessaire. 🙂

Parfois, le JavaScript natif peut être encore plus simple que jQuery. Pourquoi utiliser la méthode attr () pour rechercher un ID?

$('a').on('click', function() {
  console.log( $(this).attr('id') );
});

Vous pouvez obtenir cet attribut nativement par :

$('a').on('click', function() {
  console.log( this.id );
});

Et c’est plus rapide.

> Résultats des JSPerf

Pour lire la suite, cliquez sur la flèche ci-dessous.


2 réflexions au sujet de « Optimisation de code – comment faire perdre du poids aux pages – le javascript – 3/5 »

  1. Having read this I believed it was rather informative.
    I appreciate you taking the time and energy to put this information
    together. I once again find myself personally spending way too much time
    both reading and commenting. But so what, it was still worth it!

Laisser un commentaire

*