Développement, annonces, mises à jour, insolite : le Blog.

Accueil / Blog / Développement / ... et le JavaScript très tard

dim.		... et le JavaScript très tard  Catégorie : Développement.  Tags : Performances, Web.
15	/02
	09

"Précédemment dans la série des performances sur le Web" : je vous avais expliqué pourquoi séparer vos CSS de vos HTML dans un - seul - fichier dédié appelé dans head via la balise link permet un rendu progressif et donc un chargement plus rapide pour vos pages. Le cas inverse s’applique alors pour vos codes JavaScript, c’est la règle numéro 6 : mettre les scripts en bas.

Contrairement à la croyance générale, il est préférable d’appeler vos fichiers JS le plus tard possible dans la page, c’est à dire juste avant de refermer la balise body. La plupart du temps, nous insérons notre ligne type : <script type="application/javascript" src="monSuperScript.js"></script> (oui, application/javascript est le nouveau mime-type certifié à utiliser en remplacement de text/javascript maintenant obsolète) dans head probablement plus par souci d’une certaine élégance pour notre source ; or cette pratique n’est absolument pas obligatoire, et ce n’est pas la W3C qui démentira, les standards sont clairs, on peut aussi bien déclarer un script dans head que dans body et la seconde solution est loin de ne pas être "propre" ...

Le fait est que lorsqu’un navigateur Internet (actuel) détecte un appel de script, il bloque totalement le rendu de la page jusqu’à ce que le fichier soit chargé et le code interprété (à la différence par exemple des images qui seront téléchargées en parallèle ... j’y reviendrai). Ce comportement est dû au fait que le JavaScript peut entre autres modifier le contenu d’une page notamment via la méthode document.write(...) ; Dans ce cas, la déclaration du script est bien faite dans le body, à l’endroit même de la page où vous avez souhaité que quelque chose soit écrit via JavaScript ; cette méthode est cependant fortement à déconseiller car le JavaScript devient alors ici intrusif comme si vous l’insériez dans un attribut HTML de type gestion d’évènement que sont par exemple : onmouseover, onmouseout, onkeydown, etc. Il est évident qu’un script faisant usage de document.write ne pourra être déplacé plus bas dans la page (un exemple courant est la publicité Google Adsense qui est difficilement déplaçable sauf éventuellement grâce à une triche à base de CSS).

De plus, dans le cas contraire (pas de document.write et un appel du script dans head), le navigateur réagira de la même façon, le problème étant que le blocage du rendu se fait au niveau du header de la page, autrement dit rien ne sera encore affiché puisque le body n’est pas encore interprété. Quel est alors l’intérêt de bloquer le rendu si rien n’est rajouté à la page via JavaScript ? Eh oui, sinon vous auriez utilisé document.write et alors déplacé votre déclaration de script dans le body. D’une manière très générale, ce qu’il faut retenir avec le JavaScript, c’est qu’il est un élément bloquant pour le moteur de rendu d’un navigateur Web.

Afin de limiter la casse dans les deux cas de figure présentés ci-dessus, on évitera d’écrire du JavaScript dit intrusif par exemple grâce à l’utilisation d’un Framework JS tel que JQuery, on pourra - et l’on devra - alors toujours déplacer sa/ses ligne(s) d’appel de script pour l’écrire juste avant de refermer la balise body. Par conséquent, tout le rendu de la page sera fait (c’est à dire que votre visiteur aura rapidement accès à l’information recherchée) avant le blocage lié au chargement de vos scripts. J’en avais déjà parlé, il s’agit ni plus ni moins de privilégier le fond à la forme lors du rendu afin que vos visiteurs aient moins l’impression d’attendre. En plus, ceci vous assurera que l’arbre de vos pages (constitué par les "noeuds" de balises) sera entièrement disponible avant que votre Framework JS fasse les attributions pour la gestion des évènements (onclick, ...) ; le cas contraire étant une aberration.

Cordialement.

0 commentaire.

Billet lu 0 fois.   Écrit par : Sebastien P.

< Billet précédent | Haut de la page | Billet suivant >

Le module de commentaires est temporairement désactivé.
Merci de votre compréhension.