Introduction

Les langues de script côté client telles que JavaScript permettent d'ajouter des fonctionnalités utiles aux sites Web. Les scripts sont toutefois superflus, ils entraînent un certain gaspillage de la bande passante et rendent les sites Web inutilisables pour certains utilisateurs.

Utilisation recommandée

6.5 % des utilisateurs ne sont apparemment [1] pas en mesure d'exécuter JavaScript, le langage de script côté client le plus répandu et le plus populaire. Or, ce pourcentage est susceptible d'être plus élevé encore dans les pays en voie de développement. C'est pour cette raison que nous recommandons généralement d'éviter d'utiliser les scripts côté client tels que JavaScrip si possible (à savoir, là où l'effet souhaité peut être répliqué sans avoir recours à un script côté client). Dans les cas où l'utilisation de scripts est inévitable, veillez à vérifier que le site reste utilisable même si la prise en charge des scripts est désactivée sur le navigateur. Cette précaution permet de maximiser l'accessibilité de votre site Web, quel que soit le navigateur. Elle permettra également aux utilisateurs qui ont désactivé JavaScript sur leur navigateur, qui utilisent un appareil mobile ou qui utilisent des technologies d'assistance (utilisateurs handicapés) d'utiliser votre site.

Certains effets généralement réalisés à l'aide de scripts, tels que les effets de substitution de menu, possèdent des équivalents HTML ou CSS. Dans la mesure ou la prise en charge des CSS est plus répandue que celle des scripts, il est recommandé d'avoir recours à des CSS. D'autres effets potentiellement utiles peuvent également être rendus inutiles. Par exemple, les scripts qui utilisent un fichier CSS spécifique à un navigateur peuvent être remplacés par un fichier CSS unique compatible avec tous les navigateurs.

Certains scripts sont utilisés pour ajouter des fonctionnalités facultatives à un site, notamment pour valider la saisie de l'utilisateur. Dans ce cas, le script doit être dissimulé pour les utilisateurs dont le navigateur ne prend pas en charge les scripts (voir ci-dessous) et doit ensuite être testé sur un navigateur sur lequel JavaScript a été désactivé pour vérifier qu'il reste accessible.

Si certains scripts côté client sont nécessaires pour votre site ou si le site sur lequel vous travaillez contient de nombreux scripts, veillez à suivre les recommandations suivantes afin de maximiser l'accessibilité de votre site.

Gestion, chargement et mise en cache des scripts

Emplacement des scripts

Les scripts inclus en haute de la page ralentissent le chargement du reste de la page. Il est donc recommandé de placer les scripts en bas de la page si possible.

Pour les scripts sans sortie, tels que les bibliothèques de définitions de fonction, vous pouvez indiquer au navigateur de charger les scripts après le reste de la page en utilisant l'attribut defer de l'élément script tel que dans l'exemple suivant :

<script type="text/javascript" src="/scripts/library.js" defer="defer" />

Notez toutefois que les navigateurs n'utilisent pas toujours l'attribut defer de façon correcte. Firefox, par exemple, bloque le chargement de la page jusqu'à ce que les scripts aient été téléchargés, tandis qu'Internet Explorer télécharge le script, ralentissant ainsi potentiellement le chargement des autres données. Si un script n'est pas nécessaire en début de page, placez-le en bas de votre page plutôt que d'utiliser l'attribut defer.

Si vous souhaitez utiliser la compression HTTP afin de compresser des scripts de façon sûre, vous devez insérer ces derniers dans l'élément HEAD du document dans la mesure où la plupart des navigateurs n'exécutent la compression des scripts que dans l'en-tête HEAD. Cet emplacement ralentira néanmoins le chargement de l'ensemble de la page. De ce fait, et étant donné que certains navigateurs d'ancienne génération posent problème avec le JavaScript compressé, nous vous déconseillons de compresser les fichiers de script et de les placer dans l'en-tête HEAD. Par ailleurs, vous pouvez réduire la taille des fichiers de script en utilisant un filtre textuel tel que JSMIN (voir ci-dessous).

Fichiers de script multiples

Plus le nombre de fichiers de script est élevé, plus les délais occasionnés par l'envoi de demandes HTTP augmentent. Il est donc utile de regrouper vos scripts sous forme d'un seul fichier de manière à ce qu'ils soient chargés simultanément (lorsqu'ils contiennent des fonctionnalités similaires ou lorsque des fichiers de scripts JavaScripts spécifiques à un navigateur ont été enregistrés sous forme de fichiers distincts, par exemple). Le regroupement des scripts convient également mieux aux paramètres par défaut d'Internet Explorer et de Firefox, lesquels limitent le téléchargement à deux fichiers simultanés maximum pour chaque site (l'utilisation d'un nombre moindre de fichiers réduit le nombre de téléchargements).

L'inconvénient de cette approche est qu'elle force l'utilisateur à télécharger une quantité élevée de script d'un seul coup. Cette opération peut ralentir considérablement l'accès à la page d'accueil du site si le script y a été placé. Les navigateurs ne pourront charger le contenu de la page que lorsque les fichiers de script auront été téléchargés et exécutés (même si en théorie ils sont capables de télécharger plusieurs fichiers à la fois), ce qui pourrait ralentir l'accès au contenu de la page de façon considérable dans certains cas.

En guise de compromis, vous pouvez répartir les fichiers de script selon plusieurs domaines logiques distincts de manière à ce que les utilisateurs puissent télécharger uniquement les scripts qui leurs sont nécessaires suivant les pages auxquelles ils accèdent sur votre site. Chaque page ne doit alors contenir que les scripts nécessaires à ses propres fonctionnalités. Tant que vous n'interférez avec aucune dépendance, vous pouvez réorganiser les scripts comme il vous convient. Il vous suffit simplement de vérifier que toutes les fonctions invoquées ainsi que leurs fonctions sous-jacentes sont définies.

Il est généralement recommandé de séparer les scripts du code HTML afin d'améliorer l'efficacité de la mise en cache. Cela évite que l'ensemble du code soit téléchargé à nouveau si une page change alors que le script reste le même. Toutefois, si un script est si infime qu'il ne vaut pas la peine d'envoyer une nouvelle demande HTTP, mieux vaut alors le laisser dans le code HTML.

Veillez à séparer les scripts dynamiques des scripts statiques à l'aide de fichiers distincts. Le code statique peut ainsi être mis en cache et partagé entre plusieurs pages.

Assurez-vous que chaque script n'est chargé qu'une seule fois pour chaque page. Il arrive parfois qu'un même script soit inclus plusieurs fois sur une même page à mesure que le nombre de pages et de scripts augmente. Même si la mise en cache est activée (auquel cas le fichier de script ne serait chargé qu'une seule fois), chaque instance du script devra être exécutée sur l'ordinateur client avant que le reste de la page puisse être affiché.

Ecriture des scripts

Filtres textuels pour fichiers de script

Les fichiers JavaScript et VBScript peuvent être simplifiés par le biais de filtres textuels. Les espaces sont ainsi réduits et les retours à la ligne supprimés. De même, les variables et les noms de fonction sont abrégés. Souvent irrémédiable, ce processus produit généralement des fichiers de script difficiles à lire et nous vous recommandons donc de conserver une copie de l'original au cas où vous souhaiteriez apporter des modifications ou effectuer un débogage par la suite.

• JSMin[2] par Douglas Crockford : filtre pour fichier JavaScript ;
• ESC[3] par Saltstorm : fichier configurable fonctionnant avec divers hôtes de script ;
• JSLint[4] par Douglas Crockford : validateur de fichier JavaScript, utile pour vérifier que le code est correct avant traitement (les bogues sont souvent difficiles à détecter dans le code traité).

Pensez aux utilisateurs dont le navigateur ne prend pas en charge les scripts

Vous pouvez inclure du code HTML qui ne sera utilisé que lorsque les scripts ne sont pas pris en charge ou sont désactivés de la manière suivante :

<noscript>
<h2>Navigation</h2>
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/news">News</a></li>
  <li><a href="/contactus">Contact Us</a></li>
</ul>
</noscript>

Dissimulation des scripts dans le code HTML

Si vous utilisez le langage HTML plutôt que le XHTML, le code de vos scripts doit toujours être dissimulé dans les commentaires HTML de manière à ce que les navigateurs qui ne prennent pas en charge ce langage dissimulent ce code plutôt que de l'afficher sur la page :

<script type="text/vbscript"><!--
document.write("Hello World!")
'--></script>

<script type="text/javascript"><!--
document.open();
document.write("Hello World");
document.close();
//--></script>

La syntaxe de la dernière ligne de chaque script, où le commentaire HTML de fin est précédé par un commentaire dans le langage de script (par exemple : ') veille à ce que le navigateur ne tente pas d'exécuter -- ou --> en tant que code, ce qui risquerait d'entraîner l'affichage d'un message d'erreur sur certains navigateurs.

Scripts dans XHTML

Si vous utilisez le langage XHTML, vous ne devez en aucun cas placer vos scripts dans les commentaires car les processeurs XHTML sont légalement autorisés à les supprimer ou à les ignorer. Les caractères <</tt> et & sont également interdits dans les scripts imbriqués (dans les éléments script).

Pour que votre code XHTML soit valide, vous pouvez réécrire vos scripts imbriqués de la manière suivante :

• Remplacez x <= y par y => x
• Remplacez x && y par !(!x || !y)

Il peut s'avérer plus simple de placer les scripts JavaScript et VBScript dans des fichiers externes.

Vous pouvez également placer votre script dans un bloc CDATA mais les navigateurs non XHTML d'ancienne génération sont susceptibles de générer des erreurs ou de refuser de traiter le script.

AJAX

AJAX (Asynchronous JavaScript and XML) est une combinaison de scripts côté client et côté serveur. Ce langage utilise JavaScript sur le client pour envoyer des requêtes XML de données supplémentaires vers un programme sur le serveur, et ce sans recharger la page en cours. AJAX facilite l'écriture des scripts côté client pour solliciter des informations auprès du serveur. Il évite également d'avoir à télécharger des pages entières depuis le serveur.

Le langage AJAX est relativement récent. Il est généralement utilisé dans des sites interactifs conçus pour des utilisateurs disposant d'une bande passante élevée, tels que certaines applications en ligne. L'utilisation du langage AJAX pour des sites destinés à des environnements à bande passante faible reste toutefois une possibilité car elle permet de minimiser les transferts nécessaires entre le client et le serveur.

Références

[#1] http://www.upsdell.com/BrowserNews/stat_trends.htm

[#2] http://www.crockford.com/javascript/jsmin.html

[#3] http://www.saltstorm.net/depo/esc/

[#4] http://www.jslint.com/lint.html