Discussion :

[Invité]

Bonjour,

Voulant dessiner quelques fractales, je me pose des questions sur FireFox.
Voici Mendelbrot dans 1 table de 200 lignes contenants 200 cases, bref 40000 cases!



Voici un test de création de 22500 "div" sous divers navigateurs:

FireFox (3.6.10) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 12364 ms, Délai fonction: 14802 ms
Opera (10.62) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 439 ms, Délai fonction: 446 ms
Safari (5.0.2) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 352 ms, Délai fonction: 355 ms
IE8 : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 1140 ms, Délai fonction: 2812 ms
Chrome (6.0.472.63) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 426 ms, Délai fonction: 431 ms

Ai-je fais une erreur? ou bien FireFox a une drole de rapidité (15s).

Merci de vos futurs éclaircissements!

Le js du test:

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
var resolution = 150;
var pixel = 2;
var nbDiv = resolution * resolution;
 
function show()
{
  var container = document.getElementById("container");
  container.setAttribute("style", "position:absolute;left:10px;top:50px;width:" + (resolution * pixel) + "px;height:"  + (resolution * pixel) + "px;");
 
  var start = (new Date()).getTime();
 
  for(var y = 0; y < resolution; y++)
  {
    for(var x = 0; x < resolution; x++)
    {
      var curDiv = document.createElement("div");
      var style = "position:absolute;background-color:silver;left:" + (x * pixel) + "px;top:" + (y*pixel) + "px;width:" + pixel + "px;height:" + pixel + "px;";
      curDiv.setAttribute("style", style);
 
      container.appendChild(curDiv);
    }
  }
  var endCalcul = (new Date()).getTime() - start;
 
  var end = (new Date()).getTime() - start;
 
  var info = "Res: " + resolution +
             ", pixel: " + pixel +
             ", nbDiv: " + nbDiv +
             ", Délai calcul: " + endCalcul + " ms" +
             ", Délai fonction: " + end + " ms";
  document.getElementById("info").innerHTML = info;
}

jlmag

[SpaceFrog]

ça irait beaucoup plus vite avec un cloneNode

Code :

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

 var curDiv = document.createElement("div");

[dukej]

Générer un truc pareil à coup de DOM c'est juste malade

surtout mon coco que ton container est déjà dans la page quand tu utilises ta fonction show, ensuite pour chaque div tu fais un appendChild dans container, ce qui au final fais que le moteur HTML doit rafraîchir la page. En gros tu bouffes des ressources pour rien.

Le top du top c'est de générer tes divs à coup de chaines de caractères que tu mets dans un tableau
ensuite tu fais un container.innerHTML = tableau.join(''); et tu gagneras 10 secondes sur la génération de ton bordel.
Pour étayer mes dires voici ta fonction version remanié tableau : http://jsfiddle.net/rcDHz/7/

Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 64 ms, Délai fonction: 3945 ms

[Invité]

Bonjour et merci des réponses.

SpaceFrog, ce sera la prochaine étape effectivement.

dukej: Je vais regarder cela. Pour le "document.body.appendChild(container);", je m'en suis aperçu ce matin, un peu fatigué hier soir.

Sinon, cela ne m'explique pas la différence pour FF. Quand est-il chez vous?

A+

[danielhagnoul]

Bonsoir

Firefox est parmi les navigateurs les plus rapide, sauf en 64 bits, car le compilateur JIT ne fonctionne qu'en 32 bits. Mais avec Firefox 4 beta 6 peut être que...

[Invité]

Bonjour Daniel (pour info c'est le matin ),

Par chance je suis en 32 bits

Avec la méthode de dukej, effectivement c'est rapide! Bien que le rendu, toujours pour FF laisse à désirer. Et je ne parle pas de IE8!

FireFox (3.6.10) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 50 ms, Délai fonction: 440 ms (affichage du "container" très long)
Opera (10.62) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 25 ms, Délai fonction: 324 ms (affichage du "container" rapide)
Safari (5.0.2) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 43 ms, Délai fonction: 515 ms (affichage du "container" rapide)
IE8 : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 218 ms, Délai fonction: 578 ms (pas d'affichage correct du "container")
Chrome (6.0.472.63) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 23 ms, Délai fonction: 571 ms (affichage du "container" rapide)

A voir ici.

Question supplémentaire, comment détecter la fin d'affichage d'un "div"?

jlmag

[dukej]

Bonjour Daniel (pour info c'est le matin ),

Par chance je suis en 32 bits

Avec la méthode de dukej, effectivement c'est rapide! Bien que le rendu, toujours pour FF laisse à désirer. Et je ne parle pas de IE8!

FireFox (3.6.10) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 50 ms, Délai fonction: 440 ms (affichage du "container" très long)
Opera (10.62) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 25 ms, Délai fonction: 324 ms (affichage du "container" rapide)
Safari (5.0.2) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 43 ms, Délai fonction: 515 ms (affichage du "container" rapide)
IE8 : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 218 ms, Délai fonction: 578 ms (pas d'affichage correct du "container")
Chrome (6.0.472.63) : Res: 150, pixel: 2, nbDiv: 22500, Délai calcul: 23 ms, Délai fonction: 571 ms (affichage du "container" rapide)

A voir ici.

Question supplémentaire, comment détecter la fin d'affichage d'un "div"?

jlmag

comment ça ? comment détecter la fin d'affichage d'un div ?

ben c'est tout con, figure toi que le temps de génération graphique tu l'as déjà dans ton "délai fonction"
tu fais juste la soustraction "delai fonction - delai calcul"
et tu auras le temps d'affichage.

[Invité]

ben c'est tout con, figure toi que le temps de génération graphique tu l'as déjà dans ton "délai fonction"
tu fais juste la soustraction "delai fonction - delai calcul"
et tu auras le temps d'affichage.

dukej, je n'y crois pas! Pour FF, il doit y avoir 5s entre le moment du clic et l'affichage!!! Et non 390ms, comme pourrait le laisser croire la soustraction.

jlmag

[dukej]

dukej, je n'y crois pas! Pour FF, il doit y avoir 5s entre le moment du clic et l'affichage!!! Et non 390ms, comme pourrait le laisser croire la soustraction.

jlmag

Ben après tout dépend comment le navigateur se sert de la machine pour rendre le HTML, car sur une carte graphique rapide en 2D j'ai un rendu en moins d'une seconde sur ma machine.

Autre chose, pourquoi ne pas générer la fractale dans un canvas, c'est plus fait pour ça.

[Bovino]

Salut.

En dehors de toute considération de performance de JavaScript, il faut prendre en compte que sur Firefox, le nombre et la nature des modules complémentaires installés peut ralentir les performances globales de façon impressionnante

[danielhagnoul]

Bonsoir

La fractale de Benoît Mandelbrot en JavaScript ! ? Non !

Voir : http://www.developpez.net/forums/d98...ot-javascript/