1.724.811 Div dans une page web, faisable ? - HTML/CSS - Programmation
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 ?
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.. ^^
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...
Marsh Posté le 19-07-2012 à 09:25:14
comme dit rufo, balise canvas c'est justement fait pour ça
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 ^^
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.
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 ^^
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
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