Optimisation des performances

Optimisation des performances

Évitez les opérations DOM inutiles

Il est coûteux pour le navigateur de parcourir les éléments DOM. La solution la plus simple pour optimiser la requête de l'arborescence DOM consiste à l'enregistrer dans une variable lorsqu'un élément apparaît plusieurs fois pour éviter d'interroger l'arborescence DOM plusieurs fois.

// Recommended
var myList = "";
var myListHTML = document.getElementById("myList").innerHTML;

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

myListHTML = myList;

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

Longueur du tableau de cache

Les boucles sont sans aucun doute une partie très importante des performances JavaScript. En stockant la longueur du tableau, vous pouvez effectivement éviter de recalculer chaque boucle.

Remarque : bien que les moteurs de navigateur modernes optimisent automatiquement ce processus, n'oubliez pas qu'il existe encore des navigateurs plus anciens.

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

}

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

}

Chargement asynchrone de contenu tiers

Lorsque vous ne pouvez pas garantir que l'intégration de contenu tiers tel que des vidéos Youtube ou un bouton J'aime/tweet fonctionnera correctement, vous devez envisager de charger ces codes de manière asynchrone pour éviter de bloquer la page entière charger.

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

    load('//apis.google.com/js/plusone.js');
    load('//platform.twitter.com/widgets.js');
    load('//s.widgetsite.com/widget.js');

}());

Évitez d'utiliser jQuery pour implémenter l'animation

1. Il est interdit d'utiliser slideUp/Down() fadeIn/fadeOut() et d'autres méthodes

2. Essayez de ne pas utiliser la méthode animate() ;