Double load d’une même page à cause des img src vide

Aujourd’hui j’ai encore eu affaire à un double load d’une même page à chaque accés sur cette page, la cause de ce double load :

<asp:Image runat="server" /> ou <asp:ImageButton runat="server">

qui se transforme en :

<img src="" />


Pourquoi ces dysfonctionnements? D’aprés les normes rfc, les navigateurs doivent remplacer les urls vides des images par l’url de base : http://www.ietf.org/rfc/rfc1808.txt, Section 4, Step 2, a).

Là où ça se complique, les navigateurs ont des comportements différents quand ils rencontrent img src=''
- Quand on interroge ie si l’image est placée sur une url de type ‘http://toto.com/toto/mapage.html’ la requete sera effectuée sur le repertoire dans lequel la page est executée : ‘http://toto.com/toto/’
- Safari et chrome font une requête sur la page en cours
- Opera ne fait aucune requête
- Firefox 3 et avant ont le même comportement que Safari et Chrome, Firefox 3.5 ignore comme Opéra la requête.

Le double postback entraine une surcharge de requêtes inutiles pour le serveur, on passe ainsi d’1 page visitée à 2, de 10000 à 20000, de plus l’internaute réexecute une requete serveur et doit attendre le chargement de l’image pour voir sa page.
Enfin même si la requête ne renvoie pas d’affichage, les cookies et autres informations du header sont quand même envoyés à l’internaute, ce qui peut provoquer pas mal de dysfonctionnements.

Donc sur un lien pas de probleme il faut cliquer dessus pour éxecuter la page, mais sur une image la page est réexecuter pour afficher le résultat. même si l’image est cachée via javascript (dans un div en display none) le code est quand même réexecuté. Le probleme concerne les images et les balises :

<script  scr='' />
<link href='' />
<input type='image' src='' />

concernant ces balises, les navigateurs ont aussi des comportements différents :
- pour la balise input type=’image’ les navigateurs ont le même comportement que pour la balise img
- pour les balise script et link, seul firefox 3 et avant, Safari et Chrome font une requête, les autres ne prennent pas la balise en compte.

Pour remédier au probleme, la solution la plus simple est de pointer par défaut sur une image transparente d’1pixel sur 1 pixel

Attention aussi aux controles externes comme l’AJAX DropDown extender si vous n’utilisez pas l’attribut DropArrowImageUrl alors il génére un src vide pensez du coup à y mettre l’image vide…

Bon courage.

Sources :
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
http://geekswithblogs.net/bcaraway/archive/2007/08/24/114945.aspx

Laisser un commentaire

Votre commentaire