11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai récemment ajouter l'outil de statistiques de xiti sur mon stie web : http://www.wikisquare.com/

Tout fonctionne parfaitement, sauf que depuis, chaque changement de page cause un rafraichissement complet de celle-ci (testé sous firefox), alors qu'auparavant seules les parties de la page qui changeaient d'une page à l'autre étaient rafraichies. Je sais qu'il ne s'agit pas réellement d'un problème mais cela reste désagréable à la navigation. J'ai pensé à utiliser PHP pour remplacer le code JavaScript fournis par XiTi. Seulement, pour arriver à son terme, ce script a besoin de la résolution et de la profondeur de couleur de l'écran de l'utilisateur, paramètre bien entendu impossible à obtenir directement en PHP. Auriez vous-une idée ? Quels sont les causes en JavaScript de ce mauvais rafraichissement ?

Merci d'avance.
Modifié par FFTiger (07 Jan 2008 - 00:19)
Bonjour,

FFTiger a écrit :
Tout fonctionne parfaitement, sauf que depuis, chaque changement de page cause un rafraichissement complet de celle-ci (testé sous firefox), alors qu'auparavant seules les parties de la page qui changeaient d'une page à l'autre étaient rafraichies.

Heu... tu es sûr de toi pour cette dernière affirmation? Tu veux dire qu'auparavant ça fonctionnait:
- soit avec des frames;
- soit avec de l'Ajax?
À vue de nez, les deux sont faux.

Je suppose donc qu'avant l'ajout de ce code, le chargement d'une nouvelle page était suffisamment fluide pour que le remplacement de certains éléments (interface globale, en-tête, pied de page, menu de gauche...) par exactement les mêmes éléments avec la même mise en forme donne l'impression que ces contenus n'étaient pas rechargés. À priori, ils l'étaient, et rien n'a changé sur ce point.
Il est possible par contre que l'ajout d'un script te fasse perdre des performances, surtout s'il fait appel à un élément extérieur, et que cette perte de performances se traduise par un temps de chargement des pages un peu plus long, qui rend plus visible le fait que l'intégralité du contenu est renouvelé à chaque fois.

Mais là, pour dire les choses clairement: on s'en fiche, non?
Si tu as des latences de cinq secondes, ok, ça serait sympa de faire mieux. Mais si tu as une demi-seconde de page blanche, on s'en fiche royalement, non?
Pour ma part je n'ai pas rencontré de latence gênante.

(En passant: en général les utilisateurs se fichent du petit flash blanc que l'on peut avoir dans certaines conditions. Au contraire, ça leur indique qu'ils ont bien changé de page comme souhaité. Ce sont surtout les webmasters qui, cliquant sur quinze liens les uns à la suite des autres pour «inspecter» leur site, trouvent ça gênant. Le seul cas réellement gênant c'est quand la latence est très sensible, peut lasser le visiteur, voire dans les cas extrême lui faire penser que le site ne marche plus...)

Par contre, j'ai recontré un très gros problème sur ta page d'accueil: un poids total de la page de 690 Ko. Argh. Smiley biggol
L'image de fond en JPEG mal optimisé en 2048x1000px, c'est criminel. La bannière est lourde mais pourrait tourner dans les 60 Ko plutôt qu'à 150 Ko.
Ensuite, tu as des images en PNG-24 pas super légères non plus... là, vu que tu utilises la transparence (à part pour l'image du Chocobo, ou l'image pourrait être un JPEG opaque cinq fois moins lourd...), pas grand chose à faire: il s'agit de choix de design mal avisés car tenant peu compte des contraintes du Web (on peut dire la même chose du fond en 2048x1000px, bien sûr). Smiley cligne
Je sais bien que la totalité de la page est renvoyée pour la plupart des cas. Cependant, c'est le navigateur qui s'occupe de ne remplacer que les éléments qui changent... Hors, ce script en JavaScript gène le rafraichissement, je pense lorsque document.write() est appelé... C'est à ce moment là je pense que la page est rafraichie... Depuis la navigation est tout de même nettement mois agréable... notamment ce clignotement à chaque chargement de page (il ne faut pas oublier que sur un wiki, le webmaster est loin d'être le seul à faire des vas et viens entre les pages). J'ai également conscience que mes images sont biens trop lourdes, mais j'ai du mal à trouver un compromis entre la qualité visuelle et le poids de la page. Mais bon, les images de l'interface ne sont chargées qu'une seule fois de toute manière, ensuite le navigateur les récupère dans son cache. Je m'occuperais de ce soucis d'optimisation, quand la compatibilité du site sera au point (en réalité, mon soucis est que je ne possède plus certaines images nécessaires à la reconstruction des images de l'interface).

Par contre, je ne vois pas en quoi le choix du design est mal avisé, je veux dire, seule l'image de fond peut paraitre superflu, mais de toute façon, l'enlever ne servirait à rien puisque qu'elle continu de se charger en arrière plan (2048*1000, pour ne pas avoir de répétition horizontales jusqu'aux 24", même si la répétition se fait en fondu, je trouve ça moche). Cette remarque m'a donné une idée, je vais changer la couleur de fond, pour que l'interface soit agréable en attendant le chargement complet de l'image (2 ou 3 secondes). Pour ce qui est des images png, je viens effectivement de remarquer que la bannière du bas n'était pas dans un format adapté je vais la passer en jpg, voir la supprimer. Le logo lui, a besoin du canal alpha, et le reste des images png est composé de petites icônes formées d'aplats de couleurs... Il me semblait que c'était le meilleur format pour ce type d'images. Le chocobo va virer dans quelques semaines, alors je vais pas chipoter pour 10 Kio de moins alors que j'ai des centaines de Kio à perdre ^^. En gros quand je compresse mes images, je commence par choisir le sous-échantillonnage en fonction de la richesse des couleurs de l'image, et ensuite je réduis la qualité de l'image jusqu'à voir apparaitre des artéfacts, à ce moment là j'arrête et j'enregistre (en progressif quand j'y pense). Il me semble que vu la pénétration de l'ADSL en France... on peut commencer à privilégier la qualité. Je vais commencer par essayer de passer la page en dessous de 500 Kio (en comptant une image de fond non nécessaire au bon affichage de la page).

Pour en revenir à mon problème, je pense que je vais utiliser php, tant pis pour les stats sur la largeur des écrans et la profondeur de couleur, si vous ne voyez pas d'autres solutions.

Merci

Edit : Voilà, j'ai fait gagner plus de 150 Kio à la page d'accueil. Sans sacrifice visuel (juste une petite perte de qualité sur la bannière principale, pourtant je ne l'ai descendu qu'à 100 Kio depuis une png, mais elle est très colorée)... j'irai plus loin plus tard.

Edit : Donc voilà pour ceux que ça intéresse, l'équivalent PHP du code du bouton XiTi, qui ne supporte bien entendu pas les stats sur les propriétés de l'écran, qui ne fait plus la distinction entre l'heure serveur et l'heure locale, et qu'il faudra adapter à votre site (s=xxxxxx et p=$ID) :


	<a href="http://www.xiti.com/xiti.asp?s=347083" title="WebAnalytics">
		<?php
		$xiti['timestamp'] = time();
		$xiti['time'] = getdate($xiti['timestamp']);
		$xiti['url'] = $_SERVER['HTTP_REFERER'];
		$pattern[0] = '/[<>"]/';
		$replacement[0] = '';
		$pattern[1] = '/&/';
		$replacement[1] = '$';
		$xiti['url'] = preg_replace($pattern, $replacement, $xiti['url']);
		$xiti['src'] = 'http://logv145.xiti.com/bcg.xiti?s=347083&amp;p=';
		$xiti['src'].= $ID;
		$xiti['src'].= '&amp;hl=';
		$xiti['src'].= $xiti['time']['hours'].'x'.$xiti['time']['minutes'].'x'.$xiti['time']['seconds'];
		$xiti['src'].= '&amp;ref=';
		$xiti['src'].= $xiti['url']; ?>
		<img src="<?php echo $xiti['src']; ?>" width="80" height="15" alt="WebAnalytics" />
	</a>


Je marque ce topic comme résolu car le problème de rafraichissement a comme je le pensais disparu depuis le passage à PHP.
Modifié par FFTiger (08 Jan 2008 - 00:13)