Comprendre et optimiser le chargement de vos scripts

Comprendre et optimiser le chargement de vos scripts

Html5, CSS3, Javascript Tutoriels

Lorsque votre navigateur reçoit le contenu Html d’une page Web, ce dernier met immédiatement en place une politique de chargement du contenu. Certains éléments seront empilés et priorisés, d’autres seront chargés de manière asynchrone et parallèlement à d’autres éléments.
A travers cet article, je vais vous présenter les différents modes de chargement des fichiers Javascript mais également quelques astuces pour optimiser l’affichage de vos pages.

L’entête en tête !

Le premier élément que votre navigateur va traiter est l’entête de votre page (la balise ). Ainsi, tous les éléments figurant dans cet espace seront chargés en priorité avant même de continuer. Il convient d’inclure dans votre entête tous les éléments qui ont une incidence directe avec le rendu des éléments de votre page. On y déclare donc les feuilles de styles mais également les scripts qui peuvent jouer sur le mode de rendu de vos éléments Html.

Evitez à tout prix de polluer votre entête avec l’appel de fichiers Javascript. Plus vous en mettrez, plus votre page mettra un certain temps avant de s’afficher.

L’exemple d’inclusion Javascript en entête le plus connu est l’utilisation de la librairie « html5shiv » qui permet de corriger le rendu par défaut (inline) des balises Html5 qui ne sont pas prises en charge par Internet Explorer.

Le DOM

La seconde partie de votre document à être chargée est votre structure Html qu’on appelle plus couramment « DOM » (Document Object Model).

Attention, si l’arborescence et son contenu textuel est chargé, il n’en est pas de même pour les ressources graphiques. En effet, votre navigateur ne les chargera qu’une fois l’arborescence de votre document chargée voire de manière asynchrone (en parallèle des autres éléments à télécharger) suivant le type de navigateur.

On utilise en général le déclencheur de fin de chargement du DOM (syntaxe jQuery : $(document).ready()) pour commencer les interactions Javascript plutôt que celui de fin de chargement de la page (syntaxe jQuery : $(window).load()). En effet, il est inutile de faire patienter le visiteur de votre page pour poser des évènements ou déclarer un slideshow.

Pour tester la véracité de ces propos, il vous suffit de créer une page Html et d’y inclure une image lourde (au moins 5Mo et en ligne). Ajoutez également ses quelques lignes de codes Javascript en bas de votre document (juste avant la fermeture de votre <body>) :

<script>
     window.addEventListener("load", function(){ document.write("Page chargée !"); }, false);
     document.addEventListener("DOMContentLoaded", function(){ document.write("DOM chargé !"); }, false);
</script>


Le résultat sera le suivant : le message “DOM chargé !” s’affichera dès l’ouverture de votre page. Le deuxième message “Page chargée !” quant à lui ne s’affichera que plus tard, lorsque l’image aura été complètement chargée par votre navigateur.

Il est également bon de savoir que le chargement de votre DOM se fait de manière logique du nœud le plus bas au nœud le plus haut soit du haut de votre balise jusqu’au bas de votre page. D’où l’intérêt de placer ses scripts Javascript juste avant la fermeture de votre balise afin de différer au maximum l’affichage de votre page et l’exécution de vos scripts. Vous pouvez également aller plus loin dans l’optimisation des appels de vos scripts en passant par les attributs Async et Defer.

Async VS Defer

Une inclusion classique d’un fichier Javascript ressemble à ça :

<script src="js/minscript.js"></script>

Dans ce mode, votre navigateur va stopper le traitement du DOM pour se focaliser sur votre script. Il va donc le télécharger, l’exécuter puis reprendre le traitement du DOM.

Inclusion d’un script avec l’attribut Defer :

<script src="js/minscript.js" defer ></script>

Ici, votre navigateur va précharger votre script tout en continuant son travail sur le DOM. L’exécution de ce script ne se fera que lorsque le DOM sera totalement chargé.

Inclusion d’un script avec l’attribut Async :

<script src="js/minscript.js" async ></script>

Tout comme l’attribut Defer, votre script sera préchargé durant le traitement du DOM. Cependant, lorsque celui sera chargé, votre navigateur stoppera le traitement du DOM pour exécuter votre script.

La question qu’on peut donc se poser est la suivante : quand faut-il utiliser l’une ou l’autre de ses méthodes ?

Pour la première méthode, à savoir l’inclusion classique, c’est très simple : c’est une méthode qu’il va falloir très vite oublier. Dans tous les cas, il faut privilégier le téléchargement asynchrone des scripts afin d’optimiser la vitesse de chargement des pages.
Reste l’utilisation des attributs Defer et Async. Le premier est à préférer dans la majeure partie des cas. En effet, lorsque vos scripts agissent sur le comportement du DOM (par exemple la mise en place d’évènements), vous devez être certain que la totalité de votre DOM a été traitée. Concernant l’utilisation de l’attribut Async, son utilisation est assez controversée étant donné que le traitement du DOM est stoppé dès lors que votre script est chargé. Son utilisation ne sera donc nécessaire que dans des cas bien précis.

Enfin, sachez qu’Internet Explorer n’interprète l’attribut Async que depuis la version 10.

load_timelineIllustration: Peter Beverloo

A propos de l'auteur

Commentaires

  • ldzintegratore le 12/07/2013 à 5:07

    Bonjour Sébastien,
    je découvre WordPress et votre blog, je suis ravi de lire tous ces articles, tutos... c'est vraiment chouette.
    Pour alimenter, rebondir sur defer vs async, voici un chouette article de dew sur alsacréations : http://bit.ly/12qG0sX
    Enjoy!

    Merci encore ;)

* KeywordLuv ! Entrez VotreNom@VosMotsClés dans le champ "Nom" pour bénéficier d'un mot-clef ciblé.