En tant que programmeur ASP, vous ne douterez pas de l'importance d'améliorer les performances de vos applications Web. Afin d'accélérer l'exécution de votre programme, vous avez peut-être été occupé à optimiser la base de données ou le composant COM. Si vous avez fait tout cela, avez-vous déjà pensé à améliorer les performances en accélérant la vitesse d'affichage du code HTML final généré dans le navigateur ? Pour l'utilisateur final, si la page peut s'afficher plus rapidement, vous gagnerez plus d'éloges.
L'amélioration de la vitesse à laquelle le HTML s'affiche dans votre navigateur peut être obtenue grâce à certaines techniques peu connues.
1. Utiliser l'imbrication de tables ?
L'établissement de structures complexes dans la page est généralement réalisé en plaçant des tableaux HTML sur la page. Si vous souhaitez créer une page comme celle-ci : Cette page comporte une barre de navigation supérieure, une barre de navigation à gauche et une zone de contenu à droite. Vous pouvez créer cela en utilisant un grand tableau avec deux lignes et deux colonnes. Dans la première ligne, fusionnez les deux colonnes et insérez une barre de navigation supérieure. Dans la colonne de gauche de la deuxième ligne, insérez un tableau pour afficher les boutons de navigation. Dans la colonne de droite, placez un tableau pour afficher le contenu réel. (Voir Figure 1) Le code généré par une telle table imbriquée est le suivant :
<TABLE BORDER="0">
<TR>
<TD COLSPAN="2"><!-- contenu pour la barre de navigation supérieure --></TD>
</TR>
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- contenu pour la barre de navigation de gauche --></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- contenu du corps de la page --></TD>
</TR>
</TABLE>
Cependant, en effet, lorsque le navigateur trouve la balise <TABLE>, il n'affiche pas immédiatement la page à l'écran à moins de trouver la balise de fermeture correspondante </TABLE>. Par conséquent, si votre page entière est dans un tableau, rien ne sera affiché jusqu'à ce que le dernier </TABLE> soit reçu. De cette manière, la page ne sera pas visible par l'utilisateur jusqu'à ce que l'intégralité du fichier soit téléchargée. Lorsque la quantité de données de page est relativement importante (comme les résultats de recherche des moteurs de recherche), cette fonctionnalité provoquera des pauses temporaires. Afin d'éviter cette situation, la page peut être divisée en plusieurs petits tableaux lors de la production. Lorsque le code HTML de chaque <TABLE> vers le </TABLE> correspondant est téléchargé, le navigateur l'affichera. Du point de vue du visiteur, la page apparaît progressivement, partie par partie, apparaissant de plus en plus à l'écran. On a l'impression que la vitesse d'affichage d'une telle page est plus rapide que le téléchargement de l'intégralité du fichier et son affichage à nouveau.
En suivant ce principe pour étudier l'exemple précédent, l'ensemble du grand tableau de la page doit être divisé en trois tableaux distincts. Utilisez le premier tableau pour afficher la barre de navigation supérieure, ajustez sa largeur pour qu'elle soit suffisamment grande pour contenir tout le contenu et complétez-la dans un bloc <TABLE></TABLE>. Dans la moitié inférieure de la page, le deuxième tableau en partant de la gauche est aligné. Utilisez une troisième table pour contenir le contenu réel. (Voir Figure 2) Étant donné que chaque partie est un tableau complet, chaque partie du code sera affichée immédiatement après le téléchargement. De cette façon, les barres de navigation supérieure et gauche ressortiront davantage que le reste de la page. L'utilisateur imaginera que le téléchargement de la page commencera à ce moment-là et s'affichera bientôt à l'écran. C’est bien mieux que de laisser l’utilisateur face à un écran vide pendant une période prolongée.
Le code modifié est le suivant :
<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP"><!-- contenu pour la barre de navigation supérieure --></TD>
</TR>
</TABLE>
<TABLE BORDER="0" ALIGN="GAUCHE">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- contenu pour la barre de navigation de gauche --></TD>
</TR>
</TABLE>
<BORDURE TABLE="0">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- contenu du corps de la page --></TD>
</TR>
</TABLE>
2. N'oubliez pas non plus de fermer les autres balises.
Dans l'exemple ci-dessus, nous pouvons accélérer l'affichage de la page dans le navigateur simplement en fermant la balise <TABLE> plus tôt. Par analogie, il existe des balises similaires qui présentent les mêmes caractéristiques.
Par exemple, générez des balises <OPTION> pour les zones de liste et les zones de liste déroulante et des balises <LI> pour les éléments de liste. Habituellement, les programmeurs ASP accèdent à la base de données et envoient des données dans la zone de liste ou la zone de liste déroulante créée via <OPTION>. À ce stade, une balise de fermeture <OPTION> est écrite dans le code. Une modification aussi simple peut également accélérer l'affichage de la page. dans le navigateur.
N'utilisez pas de code comme celui-ci :
Do while not objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") &_""">"& _objRS("ProductName")
objRS.MoveNext
Loop
Response.Write "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
Pour utiliser un code comme celui-ci :
Do while not objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") & _ """>" & objRS("ProductName") & "</OPTION>"
objRS.MoveNext
Loop
Response.Write "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
N'utilisez pas de code comme celui-ci :
<UL>
<LI>Pommes
<LI>Oranges
<LI>Bananes
</UL>
Utilisez le code comme ceci :
<UL>
<LI>Pommes</LI>
<LI>Oranges</LI>
<LI>Bananes</LI>
</UL>
Maintenant regardez, votre page s'affiche-t-elle plus rapidement dans le navigateur ?
Ne sous-estimez pas l’importance de ces changements dans l’amélioration des performances des applications ASP. Peut-être que dans les livres ou les documents en ligne de type « Conseils et astuces » que vous pouvez trouver, il est rarement fait mention de l'optimisation du code HTML pour rendre votre programme plus rapide. Cependant, l’application pratique de ces technologies peut effectivement améliorer considérablement les performances des programmes.