Discussion :

[chicorico]

Bonjour,

J'aimerais savoir s'il est possible d'optimiser le code suivant car je trouve que le défilement d'images horizontales n'est pas très fluide lorsqu'il y a une centaines d'images.
Sur un pc récent c'est fluide, sur un PC plus vieux genre pentium4, amd64 c'est moins fluide.

Les facteurs limitant semblent être la résolution et le nombre d'images.
J'ai essayé de cacher les images qui n'étaient pas visibles à l'écran mais ca ralentissait plus qu'autre chose.
Après quelques tests c'est l'assignation de la nouvelle position qui semble lent :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

imgs[i].style.left= (parseInt(imgs[i].style.left) - iStep)+"px";

Avez-vous des idées pour optimiser ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
/* 
   imgs est un tableau global contenant les images
   Un seul appel getElementByTagName est fait sur le onload de la page
   pour optimiser.
*/
 
/*   <-    */
function moveLeft(){
	var iStep = parseInt(speed);
 
	if (parseInt(imgs[nbImg-1].style.left)> halfScreen){
		for(i=0; i<nbImg; i++){
			imgs[i].style.left=(parseInt(imgs[i].style.left) - iStep)+"px";
			/*var left = parseInt(imgs[i].style.left);
			if (left <= clientWidth)
				show("img"+(i+1));//imgs[i].style.visibility="visible";
 
			if (left +  parseInt(imgs[i].width) + 10 <= 0)
				hide("img"+(i+1));//imgs[i].style.visibility="hidden";*/
		}
 
	}
}
/*   ->    */
function moveRight(){
	var iStep = parseInt(speed);
 
	if (parseInt(imgs[1].style.left) < halfScreen){
		for(i=nbImg-1; i>=0; i--){
			imgs[i].style.left=(parseInt(imgs[i].style.left) + iStep) + "px";
			/*var left = parseInt(imgs[i].style.left);
			if (left >= clientWidth)
				///hide("img"+(i+1));
				//imgs[i].style.visibility="hidden";
 
			if (left +  parseInt(imgs[i].width) + 10 >= 0)
				///show("img"+(i+1));
				//imgs[i].style.visibility="visible";*/
		}
	}
}
/* Appel sur le onmousemove du body */
function position(event) {
	var x = 0;
 
	if (slide == 1){
		x=event.clientX;
 
       	speed = 4*(Math.abs(halfScreen-x) / halfScreen);
 
		if (x < halfScreen)
		{
				//Si la souris est à gauche on déplace de gauche à droite
				clearInterval(timerSlideL);						
				timerSlideL = setInterval(moveRight, time );
		}
		else{
				//Si la souris est à droite on déplace de droite à gauche
				clearInterval(timerSlideL);
				timerSlideL = setInterval(moveLeft, time );
		}
	}
}

Merci d'avance.

Chicorico.

[scourjean]

Oui résolution et nombre d'images trop grand ne font pas bon ménage.

Après tu peux essayer de charger les images une par une via ajax ou le nombre que tu veux mais pas une centaine. Et voir si tu ne peux pas redimensionner tes images à la taille voulue.

[chicorico]

Merci pour cette réponse.

Je précise que la taille d'une image est fixe (320*240), elle n'est donc pas redimensionnée.

Mes images sont incluses dans une balise "div" je me demandais si en faisant bouger cette div cela ne changerais pas la fluidité ?

[Bovino]

Oui bien sûr.
Il faut savoir que chaque modification de style entraine un reflow, donc dans ton cas, tu forces autant de reflows qu'il y a d'images, du coup, c'est sûr qu'avec une centaine d'images, ça alourdit énormément le travail !
Donc effectivement, le mieux à mon sens serait de modifier uniquement la position de la div englobante que celle de chaque image une à une.

A noter aussi que c'est cette notion de reflow qui explique le mauvais rendu pour la manipulation des tableaux importants (l'affichage d'un tableau et donc son reflow est très lourd à gérer pour les navigateurs). De la même façon, il est important d'utiliser la propriété cssText au lieu des propriétés individuelles de style.

[SpaceFrog]

perso je passerais par animate de jquery ...

[chicorico]

Merci pour vos réponses.

Pour SpaceFrog :
-Pourquoi animate serait plus fluide que ce bout de code ?

Pour bovino:
-Passer par un div serait une solution mais m'oblige à revoir une grande partie de mon code ainsi que le positionnement des mes images(elles sont en position:absolute), donc avant de modifier mon code j'aimerais être sur que le rendu sera bien plus fluide. Est-ce le cas ?

-Concernant le "reflow" ne dépend-t-il pas des navigateurs, je veux dire une optimisation sur le reflow pour firefox donnera-t-il le même résultat sur tout les navigateurs ?
-Toujours sur le "reflow" y-a-t-il un moyen de connaitre le nombre de reflow réellement fait par le navigateur ?
-Pour finir sur le "reflow" je croyais que celui-ci concernait uniquement la partie impactée et non toute la page. En effet, je déplace uniquement les images contenues dans le div, je suis étonné que tous le flux de la page soit impacté ?

-Enfin concernant cssText cela améliorait-il vraiment les performances sur tous les navigateurs ? Le site http://jsperf.com/csstext-vs-style-properties tant à confirmer que le style individuel est quand même plus rapide, qu'en pensez-vous ?

Chicorico.

[Invité]

dans la fonction le probleme c'est qu'il fait une boucle qui positionne les images une par une si on les met dans un conteneur il n'y a que le conteneur qui doit etre deplace il y a largement moins de calcule a faire pour le navigateur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 
function moveRight(){
	var iStep = parseInt(speed);
 
	if (parseInt(imgs[1].style.left) < halfScreen){
	document.getElementById("le_conteneur").style.left=(parseInt(imgs[i].style.left) + iStep) + "px";
 
 
	}
}

[briegel]

Pour avoir testé pas mal de possibilités, la div englobante me semble incontournable, songes que tu n'auras qu'un élément auquel appliquer le changement de style, déjà là tu gagnes énormément sur la boucle for.

Concernant l'attribution directe de l'attribut style, je n'ai pas réussi à me forger une opinion solide, j'ai trouvé des résultats proches et même contradictoires entre les différentes versions IE : je pense que c'est plus rapide, mais il y a une condition supplémentaire à exécuter pour la compatibilité IE6/7.

Le dernier point concerne setInterval : j'ai remarqué que setTimeOut produisait un meilleur résultat, sans pouvoir vraiment m'expliquer ça. Avec un inconvénient pour setTimeOut, c'est que tu ne peux pas contrôler précisément le taux de rafraîchissement, ça peut devenir gênant si l'exécution du code en elle-même est la plus chronophage.

Merci Bovino, la doc sur le reflow est une mine !

[Bovino]

Quelques précisions.

Le test en question (http://jsperf.com/csstext-vs-style-properties) ne me semble pas particulièrement pertinent, ou plutôt, il amène une subtilité. Du reste, ce qui m'étonne, ce n'est pas le test en lui-même mais la personnalité de celui qui l'a proposé (Thomas Fuchs, créateur de script.aculo.us).
En effet, pour modifier un voire deux styles, passer par cssText n'est pas la meilleure solution, mais ce n'est plus pareil s'il faut modifier trois ou plus styles. Donc à mon avis, il manque des cas intéressants.

Sinon, cssText est tout à fait compatible IE (au moins depuis IE6), la seule subtilité est qu'une notation par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Element.style.cssText = '...';

remplacera tous les styles en cours, pour juste le ajouter à ceux existants, il faut écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Element.style.cssText += '...';

et effectivement, là ça pose problème à IE, l'astuce consiste à rajouter un point virgule avant la déclaration car le getter de cssText de IE ne renvoie pas de point-virgule final :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Element.style.cssText += ';...';

et là, IE se comporte convenablement.

Enfin, pour revenir aux reflows, il est difficile d'envisager le comportement général qui dépend du navigateur, mais il me semble que pour IE (qui gère le JavaScript natif et le DOM JavaScript séparément), chaque déclaration de style est susceptible de provoquer un reflow là où les autres navigateurs le font de façon plus "intelligente"). Ce qui explique que les animations sont souvent moins fluides avec IE.

[chicorico]

Bonjour,

Merci pour toutes ces réponses. Effectivement cette notion de reflow est très intéressante, mais je me demande si le problème vient bien de là.En effet, j'ai essayé avec le div, mais la fluidité n'est toujours pas là, il n'y a aucune différence.
J'ai aussi essayé d'économiser sur le "display" en cachant la div avant de faire bouger les images et en la montrant après, c'est encore pire.

Par contre, bizarrement, la fluidité(avec ou sans la div qui bouge) est meilleure sous IE que sous firefox ce que je n'explique pas ?
Sous IE9 c'est vraiment super fluide(grâce au GPU), mais bon tous le monde n'a pas vista ou seven. Sous Firefox4 beta 7, la fluidité n'est pas meilleure ce que je n'explique pas non plus car cette version à l'accélération matérielle par GPU.

Avec firebug j'ai trouvé que la fonction prenait 20ms à s'exécuter(pas fluide) contre 2ms lorsqu'il n'y avait que quelques images (fluide). Je croyais qu'en dessous de 40ms (25fps) la saccade n'était pas visible par l'oeil humain ? Est-ce que le setInterval respecte bien le paramètre délai sachant que je passe 40ms comme délai ?