question g�n�rale de performance JAVASCRIPT

**dukej** · 27/05/2012, 11h52

Ton besoin me fait surtout penser aux webworkers (https://developer.mozilla.org/En/Using_web_workers)
A mon avis c'est exactement ce dont tu aurais besoin

Ca te permet de lancer des actions en parallele sans pourrir le processus principal.

**Darkyl** · 27/05/2012, 13h36

Bonjour � tous,

Merci de vos r�ponses et d�sol� si j'ai mis du temps � r�pondre.

Bon, alors, j'ai repris enti�rement le code, j'ai tenu compte de toutes vos remarques.
Pour l'instant, j'ai mis en place une map simple, avec survol de la souris et changement de texture de la case survol� et remis � jour de la case survol� avant.
J'ai fait juste �a, j'ai essay� d'optimiser un max, j'ai notamment llu plein de cours sur les classes, limit� les appels au dom, mis en variables un max et repens� la meilleurs archi possible,le r�sultat est l�:

Attention, sur firefox, la page bug (alors qu'en local elle marche bien), je pense qu'il surcharge au moment de la cr�ation des n*m images, pourtant j'ai bien fait une fonctions de mise en caches des diff�rentes images utilis�s avant de construire la map.
Donc, ouvrez le lien dans une nouvel page, pas un nouvel onglet, sinon vous allez devoir tout ferm�... ATTENTION
(pffff, je comprend pas pourquoi il bug en ligne et pas en local

)

test

C'est le plus rapide comme actualisation du survol que j'ai pu faire.

Je suis oblig� pour afficher une image, de cr�er un objet "<img>" ?
Je ne peux pas peindre l'image directement sur le div_parent ?

(�a augmenterai consid�rablement les performances pourtant

)

Chrome marche tr�s bien, il est fluide quasi temps r�el.

Qu'est ce que vous en pensez?
J'ai vraiment optimis� de partout mais je trouve que firefox (qu'en il surcharge pas

), est encore un peu lent � l'actu.

Question g�n�rique:

Quelle est la fr�quence de d�clenchement du mouseover au plus rapide?
Je veux dire que si l'utilisateur bouge sa souris tr�s tr�s vite, la fonction onmouseover de mon div_map, se d�clenche � quelle fr�quence maxi?

J'ai test� en mettant un setinterval qui g�re le tout en me disant que cela sert � rien de d�clench� le survol trop souvent (o� � interval r�gulier trop proche en tout cas) et cela ne change rien, c'est m�me plus lent)

dukej - Champialex : merci beaucoup pour les liens, j'ai cherch� partout des cours sur l'optimisation mais rien trouv�.
M�me si c'est en anglais (merci chrome translate), ils me seront utils.
Merci encore.

Willpower - Je vais voir pour les delai entre calcul, laiss� un peu le temps au navigateur de rafra�chir la page.

NoSmoking - Mon code est plus propre maintenant? A part les n*m objet img (que je suis oblig� de cr�er pour afficher une image

)

Avant de rajout� des couches de code, j'aimerais savoir ce que vous pensez de mon code, de sa vitesse d'ex�cution et de sa propret�...

Je trouve quand m�me cela un peu long (bon, d'accord j'ai mis 100*50images, pas de quoi faire ramer un proc

)

**Willpower** · 27/05/2012, 14h13

Envoy� par Darkyl

Je suis oblig� pour afficher une image, de cr�er un objet "<img>" ?
Je ne peux pas peindre l'image directement sur le div_parent ?

(�a augmenterai consid�rablement les performances pourtant

)

oui tu peux utiliser :
background-image: repeat

par contre tu devras trouver une astuce pour avoir la bonne forme final si tu veux que ta carte globale ressemble � un losange et non un rectangle.

**Darkyl** · 27/05/2012, 14h26

Ma map est faite de n*m image.
Donc je remplacerai ces n*m objet image() par des area avec un backround=image.src ?

A mon avis ce n'est pas adapt� pour mon cas.

Je voulais juste dire qu'en delphi, on peut cr�er un objet image sur le canvas ou directement "peindre" l'image au coord x,y sur le canvas.

html/javascript:
Apparemment, si je veux afficher une image, il faut cr�er l'object image().

De plus, je g�re d�j� les coord de la souris donc le b�n�fice des area sur la zone clickage ou survol ne me sers � rien.

J'ai bien compris ce que tu voulais dire ?

Je pr�cise que mes objets image() sont cr�er � la vol�e, avec position:absolute et coord left et top calcul� lors de l'initialisation des object image...

**Willpower** · 27/05/2012, 14h37

Non, mais d�j� ne cr�� pas d'objet image (je n'ai pas lu le passage de ton code en question) mais en javscript �a sert juste � pr�loader une image que tu afficheras plus tard, donc d�j� si tu fais plusieurs objets images pour la m�me image, c'est mal. et comme tu l'affiches directement ta map, tu ne dois pas "pr�loader". donc tu cr�es directement tes objets du DOM.

Ensuite, effectivement, je ne connais pas trop les map/area mais �a n'a pas l'air d'�tre la solution, au temps pour moi.

Tu fais un grand div avec un image repeat (du devras adapter ton images pour que ce soit des carr�es juxtaposables (les mettres les uns � cot�s des autres) OU ALORS tu cr�es une image en javascript avec CANVAS + getContext(2d).

**Darkyl** · 27/05/2012, 14h43

ok merci, je vais voir du c�t� de canvas et getcontext.

Le hic, c'est qu'il ne me faut pas 1 grande image de fond de map, je veux vraiment avoir mes n*m image car je change des images des fois dans le jeu (par exemple la texture de la case_a_b).
Donc si je fais avec ta methode (sans cr�er les n*m images), je rafraichi le background du div en reconstruisant la nouvel grande image alors que l�, il me suffit sur l'objet image() concern�, de changer sa source...

Mais tu as peut-�tre raison, si c'est plus rapide, je tester�...
En fait, mon jeu ne rafraichi jamais tout le div, seulement quelques object image().
On verra ce qui est le plus rapide.

Je vais me renseign� sur canvas...

**Darkyl** · 27/05/2012, 14h47

Encore merci :
j'ai trouv� cela (entre autre) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.src = 'backdrop.png';
    img.onload = function(){
      ctx.drawImage(img, 0, 0);
      ctx.beginPath();
      ctx.moveTo(30, 96);
      ctx.lineTo(70, 66);
      ctx.lineTo(103, 76);
      ctx.lineTo(170, 15);
      ctx.stroke();
    }
  }

je vais essayer...

**Darkyl** · 27/05/2012, 14h52

ok, c'�tait top beau, canvas est pas compatible IE... et les m�thodes de contournements consistent � faire ce que je fais d�j�, c'est-a-dire des image()...

**Willpower** · 27/05/2012, 14h54

Envoy� par Darkyl

Le hic, c'est qu'il ne me faut pas 1 grande image de fond de map, je veux vraiment avoir mes n*m image car je change des images des fois dans le jeu (par exemple la texture de la case_a_b).

tu superposes une image au dessus. ;-)

Par contre, ne pas avoir de grande images t'�conomises du chargement d'une grosse image lors du premier chargement de la page. ;-)

**Willpower** · 27/05/2012, 14h57

Envoy� par Darkyl

ok, c'�tait top beau, canvas est pas compatible IE... et les m�thodes de contournements consistent � faire ce que je fais d�j�, c'est-a-dire des image()...

IE9 et 10 si !

Mais bon, moi j'avoue ne plus me soucier des vieux IE, si je vois que mon site donne trop mal sur ces navigateur, je fous un GROS screen "MON SITE N'EST PAS COMPATIBLE AVEC TON NAVIGATEUR, MET-LE A JOUR OU TELECHARGE CHROME^^".

**Darkyl** · 27/05/2012, 15h15

MON SITE N'EST PAS COMPATIBLE AVEC TON NAVIGATEUR, MET-LE A JOUR OU TELECHARGE CHROME

, m�me si en d�veloppement pro, �a craint un peu...

Faut juste que je vois si la cr�ation n*m objet image() prend et utilise (apr�s coup) beaucoup de ressources par rapport � un seul canvas et n*m image 'drawer' dessus et actualisation r�guli�rement...

A mon avis, l'utilisation des image() est quand m�me mieux, mais c'est mon flair qui dit �a, et on est dimanche alors...

D'ailleurs, merci d'�tre derri�re ton clavier... Je vois qu'entre passionn�ment, on va pas � la messe

.

D'ailleurs, sais-tu pourquoi Firefox rame autant avec javascript (par rapport � chrome)?

(concernant le r�solu, je le mettrai quand je serais au m�me stade de d�veloppement que au d�but du post, c'est-a-dire bient�t, pour voir si l'optimisation abien march�).

**Willpower** · 27/05/2012, 15h29

Voila, comment g�n�rer ta map au mieux (niveau images) :

http://www.hommk.net/test.htm

Code html :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
                #map{
                        position:absolute;
                        top:0;
                        left:-10px;
                        width:1500px;
                        height:1000px;
                        background: url(img.png) 50% 50% repeat;
                }
                #wrap-left{
                        position:absolute;
                        top:0;
                        left:0;
                        width:500px;
                        height:1000px;
                        border-left: solid white 500px;
                        border-top: solid transparent 1000px;
                }
                
                #wrap-right{
                        position:absolute;
                        top:-1000px;
                        left:490px;
                        width:500px;
                        height:1000px;
                        border-right: solid white 500px;
                        border-bottom: solid transparent 1000px;
                }
        </style>
</head>
<body>
	<div id="main">
		<div id="map"></div>
		<div id="wrap-left"></div>
		<div id="wrap-right"></div>
	</div>
</body>
</html>

**Darkyl** · 27/05/2012, 15h39

Merci d'avoir test� ta m�thode.

J'ai pas encore essay� moi mais le cas o� la texture d'une case peuvent chang� �tant tr�s rare, cela peut-�tre une bonne technique de g�n�rer l'image de fond � chaque fois qu'une textures changent. Les bat�ments �tant des rajouts par dessus, pas besoin d'actualiser la map.

Mais la g�n�ration de l'image de fond sera une lecture du tableau_map[x][y]
qui 'drawera' les images des textures des cases dans le canvas (.map) � leurs bonnes coords, et non un simple background repeat, car mes images sont positionn�s fid�lement et ne sont pas toutes les m�mes.

Donc, ta technique de draw sur canvas peut_�tre tr�s int�ressante pour le temps d'ex�cution de la cr�ation de la map, puis pour les ressources non consomm� par les n*m image() (non cr�es) en temps r�el apr�s .

Merci Merci

**NoSmoking** · 27/05/2012, 17h38

tu peux sensiblement acc�l�rer la cr�ation de tes images en utilisant la m�thode cloneNode d'une part et d'autre part en travaillant dans un DocumentFragments.

**Darkyl** · 28/05/2012, 13h32

Bon, j'ai test� deux m�thodes pour cr�er les n*m object image() de la map.

La premi�re :

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
 
		for (var x=1;x<(map_du_jeu.length);x++)
		{
			for (var y=1;y<(map_du_jeu[x].length);y++)
			{
 
			var case_en_cours=map_du_jeu[x][y];
 
 
			var sentence_html_case_en_cours=retourne_sentence_html_image(case_en_cours.nom,'absolute','block',((x-1)*hauteur_case+Math.round((y-1)*(hauteur_case-1)/2)),((y-1)*hauteur_case),case_en_cours.zindex,largeur_case,hauteur_case,case_en_cours.texture.image_texture.image_loader.src);
//petite fonction qui retourne le html d'un objet image()
 
			$('#'+div_parent_map.nom).append(sentence_html_case_en_cours);
 
case_en_cours.objet_image=nouvel_object_image;			
			}		
 
		}

deuxi�me m�thode :

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
var map_fragment = document.getElementById(div_parent_map.nom);
 
 
		for (var x=1;x<(map_du_jeu.length);x++)
		{
			for (var y=1;y<(map_du_jeu[x].length);y++)
			{
 
			var case_en_cours=map_du_jeu[x][y];
 
			var nouvel_object_image = document.createElement("img");
 
					var left=((x-1)*hauteur_case+Math.round((y-1)*(hauteur_case-1)/2));
					var top=((y-1)*hauteur_case);
 
					nouvel_object_image.setAttribute("id", case_en_cours.nom);
					nouvel_object_image.setAttribute("name", case_en_cours.nom);
					nouvel_object_image.setAttribute("src", case_en_cours.texture.image_texture.image_loader.src);
					nouvel_object_image.setAttribute("style", "position:absolute; display:block; z-index:"+case_en_cours.zindex+"; left:"+left+"px;top:"+top+"px;");
					nouvel_object_image.setAttribute("src", case_en_cours.texture.image_texture.image_loader.src);
					nouvel_object_image.setAttribute("width", largeur_case);
					nouvel_object_image.setAttribute("height", hauteur_case);
 
 
 
 
				map_fragment.appendChild(nouvel_object_image);
 
 
				case_en_cours.objet_image=nouvel_object_image;			
			}		
		}

La premi�re m�thode prend environ 1sc984 (firefox) , 1sc 540 (chrome).
La deuxi�me environ 1sc200 sous firefox, 300ms sous chrome.

+1 pour la deuxi�me m�thode (merci NoSmoking)

**Willpower** · 28/05/2012, 13h50

je maintiens que ce n'est pas la bonne solution de surcharger ton DOM avec n*m balises img.

pourquoi ne pas utiliser ma solution css : http://www.hommk.net/test.htm
et de rajouter les �l�ments "diff�rents" par dessus ?

**Darkyl** · 28/05/2012, 14h13

Ben, des �l�ments diff�rents, je vais en avoir un sacr� paquets (pas les batiments ou autres objets par dessus, mais des textures de fond de cases. Rien que l'eau, je fais une mer et un ruisseau.

Donc si au final, je me retrouve avec autant (m�me si ca me ferait mal) d'�l�ments de textures rajout�s que d'images du backgoround repeat, alors autant les cr�er direct et plus au fur et � mesure (les object image()). non?

Mais je testerai quand m�me. Merci de ta solution.

Ce que je retiens en tout cas :
- firefox est bien plus lent � ex�cuter du javascript que chrome.
- L'ajout de html est plus lent que la creation direct d'objet.

Par hazard, tu connais pas une fonction (biblioth�que) qui prend une texture carr�e et renvoie une image d�form�e selon les coord des 4 points de l'image? heu, je sais pas si je suis clair l�)

**Darkyl** · 28/05/2012, 14h27

Je r�fl�chis m�me � ne pas surcharger le document du div portant la map. A cr�er que les images() visibles + 2 rang�es invisibiles de chaques c�t�s.
Puis si on d�place la map, le scroll se d�place un peu, cr�ation de 2 rang�s supp du c�t�s o� on va, suppressions des deux rang�s du c�t�s oppos� etc...

Apr�s, l'affichage d'une images (celle d'un batiment ou d'une textures, ou d'un perso ...) ne se fera que s'il est visible ou non.

Cela fera beaucoup de calcul en direct (et en setinterval proche) mais enl�vera un poid consid�rable sur le html (dom) de mon div map...

Le b�n�fice ne se fera sentir que si la carte est tr�s grande.

pas comme cela qu'il faudrait faire?

(bien s�r, je peux y ins�rer ta m�thode pour l'affichage du fond)

**NoSmoking** · 28/05/2012, 15h05

ce n'est pas exactement comme cela que je voyais la chose, la ribambelle de setAttribute plombe �galement les performance, il est recommand� de passer par des class CSS, et pourquoi � tout prix des IMG et non pas des DIV avec un background-image.

J'arrive pour
- Chrome � 120ms
- FF v3.6 � 580ms
- IE v7 � 260ms

j'arrive m�me � descendre pour
- Chrome � 110ms
- FF v3.6 � 210ms
- IE v7 � 450ms, le passage au display:block est visiblement tr�s gourmand

en travaillant sur une DIV en display:none;.

le fichier de test

Code html :

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
65
66
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Test Clonage Darkyl]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
#map_du_jeu{
  width: 1230px;
  height: 750px;
  overflow: hidden;
  background-color: white;
  border: 2px solid red;
  position: absolute;
  display: none;/**/
/*  display: block;/**/
  left: 20px;
  top: 20px;
  z-index: 10;
}
.imagefond{
  height:28px;
  width:44px;
  position:absolute;
  display:block;
  z-index:1;
  background : url(http://s408852608.onlinehome.fr/ressources_graphiques/textures%20map/herbe2.png);
}
</style>
</head>
<body>
<div id="debug" style="position:absolute;top:0;left:100px;"></div>
<div id="map_du_jeu"></div>
<script type="text/javascript">
var iDeb = new Date().getTime();
var LARG = 30, HAUT = 28, PENTE = 14;
var lig, nbLig = 50,
    col, nbCol = 100,
    posX, posY, offsetX =0;
// zone de jeu
var oClone,
    oDest = document.getElementById('map_du_jeu');
var bFlag = !oDest.clientHeight;
// creation de l'element a cloner
var oFond = document.createElement('DIV');
oFond.className = 'imagefond';
// boucle de création
for( col = 0; col < nbCol; col++){
  posY = 0;
  posX = offsetX;
  for( lig = 0; lig < nbLig; lig++){
    oClone = oFond.cloneNode( true);
    oClone.style.left = posX +'px';
    oClone.style.top  = posY +'px';
    oClone.id ='case_' +lig +'_' +col;
    oDest.appendChild( oClone);
    posY += HAUT;
    posX += PENTE;
  }
  offsetX += LARG;
}
if( bFlag) oDest.style.display = 'block';
document.getElementById( 'debug').innerHTML = new Date().getTime() -iDeb;
</script>
</body>
</html>

**Willpower** · 28/05/2012, 15h57

Perso, je viens de faire ceci (aussi avec des background-image) :

http://www.hommk.net/JEU/

Le code est extr�mement court et simple et les images sont aux case par case, le tout en 4 DIV seulement :

map

hover

lac (g�n�r� en js)

maison (g�n�r� en js)

Les cases ont un hover et le clique te dis ce qu'est l'objet en fonction de la position sur la carte. (�a bug avec le scroll, je dois le rajouter).

question g�n�rale de performance JAVASCRIPT

JavaScript

Discussions similaires

Partager

Partager