1.724.811 Div dans une page web, faisable ?

1.724.811 Div dans une page web, faisable ? - HTML/CSS - Programmation

Marsh Posté le 19-07-2012 à 00:35:03    

Bonjour à toutes et à tous !  
 
Voila, j'ai une page web qui génère des div en cliquant sur un bouton javascript.
Je dois atteindre un nombre très élevé de div, de l'ordre de 1.724.811 !
A ce niveau de div, est-ce que je risque une instabilité ?
 
Matos:
Windows 7 x64
google Chrome et/ou Firefox
 
Core i7
8 Go ddr3
SSD 240Go
GTX570
 
Merci d'avance ;-)


Message édité par fa975028 le 19-07-2012 à 01:02:54
Reply

Marsh Posté le 19-07-2012 à 00:35:03   

Reply

Marsh Posté le 19-07-2012 à 01:48:28    

heu ouais, là le DOM il s'en prend un sacré coup dans la gueule.
C'est pourquoi faire ce nombre élevé de div ?


---------------
Blablaté par Harko
Reply

Marsh Posté le 19-07-2012 à 08:56:45    

C'est pour créer une image à partir de DIV (chaque div = 1 pixel)
je voulais voir et tester l'optimisation que ca donnerais, mais j'ai un
peu peur que chrome me dise un truc qui ne flatterais pas mon ego.. ^^

Reply

Marsh Posté le 19-07-2012 à 09:24:36    

Si c'est pour faire du "dessin", à mon avis, du html5 avec la balise <canvas> me semblerait plus appropriée :/
 
http://www.html5canvastutorials.com/
 
Edit : en plus, à gérer le positionnement précis d'un tel nb de balises <div>, ça me paraît assez chaud...


Message édité par rufo le 19-07-2012 à 09:25:58

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 19-07-2012 à 09:25:14    

comme dit rufo, balise canvas c'est justement fait pour ça


---------------
Blablaté par Harko
Reply

Marsh Posté le 19-07-2012 à 09:39:33    

du javascript :o


---------------
Blablaté par Harko
Reply

Marsh Posté le 19-07-2012 à 10:17:20    

merci pour vos réponses.
En fait, je voulais juste voir si cela fonctionnait techniquement parlant de mettre un nombre élevé de div...
 
Pour le canvas, j'avais déja vu cette possibilité.
Mais le truc, c'est qu'a l'avenir, je dois pouvoir gérer ces "pixels "comme des div, avec un id, un css dynamique,...
 
@hardrøck
oui, en javascript ^^

Reply

Marsh Posté le 19-07-2012 à 13:17:05    

ben t'as qu'a essayer :)
 
c'est plus une question de "ca va ramer sa mere" qu'autre chose, enfin ca va ramer des que tu va utiliser les selecteurs et changer des propriétés.
 
en canvas tu peux faire un systeme de particules, tu n'es pas obligé d'attaquer les pixels un par un.


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 19-07-2012 à 15:30:58    

Désolé, j'était parti entre temps.
 
Voila, j'ai essayé, c'est monstrueux comment ca rame ^^
voici le code si vous vient l'esprit d'essayer aussi ;-)
 
 
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>test javascript</title>
 
<style type="text/css">
.divImage {
 height: 1px;
 width: 1px;
 float: left;
}
</style>
 
</head>
 
<body>
 
<script>
var iteration=2000000;
 
for (i=1;i<=iteration;i++) {
 
 // code qui crée un hexadécimal aléatoire de 6 caractère (couleur)
 var chars = "0123456789ABCDEF";
 var string_length = 6;
 var nombre = '';
 for (var j=0; j<string_length; j++) {
  var rnum = Math.floor(Math.random() * chars.length);
  nombre += chars.substring(rnum,rnum+1);
 }
 
 document.write('<div class="divImage" style="background-color: #'+nombre+'" ></div>');
}
</script>
</body>
</html>

 
Ici, c'est configuré pour 2.000.000 de carré. bonne chance ^^ :sol:

Reply

Marsh Posté le 20-07-2012 à 11:57:38    

à 20000 div ça foire d'avance, chrome plante avant.
Et en plus ton document.write n'est pas le bon copain ici.
Donc tu peux abandonner ton idée et passer à du canvas


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed