Optimiser les rechargements de pages
Il est important de limiter les rechargements de la page aux cas de figure nécessaires.
Pour ce faire, un script serveur peut ajouter des informations qui ne seront pas utiles
immédiatement à l’utilisateur, mais qui le seront certainement plus tard.
Un exemple classique est le contenu de sous-menus de navigation. Par défaut, seuls les
éléments principaux du menu, ainsi que le sous-menu de la partie du site dans laquelle on se
trouve sont affichés. En envoyant le contenu de tous les sous-menus systématiquement (à
condition que la quantité d’informations soit raisonnable), et en cachant les sous-menus qui
doivent être fermés, on aura la possibilité de les afficher sans recharger la page.
Dans l’autre sens, on peut récolter plusieurs informations de la part du client, par exemple
renseigner une liste nom/âge en y ajoutant plusieurs entrées. Ces informations peuvent être
conservées du côté client soit dans un tableau JavaScript, soit dans le dom, ce qui permet
d’afficher pour l’utilisateur les données en attente d’envoi vers le serveur.
Il faut toutefois être conscient que les données qui n’auraient pas été transmises au serveur
seraient perdues si l’on fermait le navigateur avant de les envoyer. Il faut donc choisir une
limite raisonnable de données qui peuvent être introduites sans les transmettre directement au
serveur. Pour pousser le raisonnement plus loin, on peut même se demander si le gain de
charge serveur et le gain de temps pour l’utilisateur justifient le développement d’un tel
mécanisme. Enfin bon, c’est bien de savoir que c’est possible, on choisira ensuite la solution
la mieux adaptée à un contexte donné.
Ajax
Ce document n’aurait pas été complet sans un mot sur le petit dernier, Ajax, abréviation de la
dénomination barbare « Asynchronous JavaScript & XML ». En deux mots, Ajax permet
d’éviter les petites pirouettes du paragraphe précédent, il permet au client de discuter avec le
serveur sans recharger la page active.
Fonctionnement
Le processus est déclenché depuis une fonction JavaScript qui va établir une connexion avec
le serveur et lui envoyer un flux, généralement au format XML, bien que rien n’interdise
d’envoyer des information dans d’autres formats. Le serveur, une fois qu’il a traité la
demande, signale au client qu’il est prêt. Dès lors, depuis JavaScript, on peut demander le
résultat au serveur et l’utiliser pour modifier la page, qui n’a pas été rechargée durant ce
processus.
Si on reprend nos deux exemples de tout à l’heure, le contenu des sous-menus fermés pourrait
être demandé lorsque le menu en question est cliqué, moyennant un petit temps d’attente.
Quand aux éléments de notre liste, ils pourraient être envoyés en arrière plan une fois leur
saisie terminée, avec une information à l’écran une fois la ligne sauvegardée.
Côté serveur
Les trois processeurs de pages dynamiques évoqués dans cet article permettent de travailler
avec la technologie Ajax. Les liens ci-dessous pointent vers les recommandations faites pour