Discussion :

[Loralina]

Bonsoir,

sauf qu'en épreuve d'examen, ça vaut une note de 0/20 (hors sujet) ...

Le sujet peut concerner d'autres personnes qui pourraient être intéressées par des alternatives.
De plus, il n'est pas rare qu'une personne arrive sur le forum avec une idée et en reparte avec une autre à laquelle elle n'avait pas pensé et qui finalement lui convient mieux.

Après, si c'est pour un exercice avec des consignes strictes, cela peut être signalé et on en tient compte.
Malgré cela, des participations qui s'en éloignent (des consignes) sont à mon sens bienvenues car elles peuvent être enrichissantes.

Enfin, à un entretien ou à un examen, il peut être aussi pertinent d'apporter ou de signaler, en plus de la solution attendue, une alternative digne d'intérêt.

[clavier12AZQSWX]

Enfin, à un entretien ou à un examen, il peut être aussi pertinent d'apporter ou de signaler, en plus de la solution attendue, une alternative digne d'intérêt.

[humour]Vous avez voulu une épilation totale, j'ai donc épilé les sourcils, les cils et vous ai rasé le crâne. [/humour]

j'admire votre gentilesse sauf que si on part de ce principe, alors le code du dessus est extrême car ça ramène à juste remplacer les cellules vides par 'rien' plutôt que de s'embetter à considérer des colonnes et des lignes (une matrice) et analyser les contenus, les noeuds child..etc.
donc en gros, le code qui précéde aurait pu être extrement simplifié à un code similaire à :
chercher ("<li></li>") et remplacer par "" dans le noeud html de l'D !
plus besoin de boucle, une seule instruction suffirait !

sans avoir tester :

Code :

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

document.getElementById("montableau").innerHTML=str.replace("<li></li>", "");

hélas dans mon cas (une matrice symbolisé par un tableau HTML), je peux appliquer cette méthode :

Code :

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

document.getElementById("montableau").innerHTML=str.replace("<td></td>", "");

car je vais perdre la relation des colonnes (décallage des cellules).

Je n'ai pas la main sur le code qui transforme les données matricielles en tableau, si c'était le cas, bien évidement j'aurai préféré un rendu html en DIV ou UL/LI...
merci à tous.

[javatwister]

ça ramène à juste remplacer les cellules vides par 'rien'

Cette remarque n'a 'rien' à voir avec le code que j'ai proposé (vraiment rien)

plutôt que de s'embetter à considérer des colonnes et des lignes (une matrice) et analyser les contenus, les noeuds child..etc.

Tu noies le poisson en multipliant les grands mots...
C'est dommage car ta demande initiale avait le mérité d'être claire et simple:

sur un tableau, j'ai besoin d'appliquer un traitement qui s'apparente à l'inverse de tetris : au lieu de pousser les contenus vers le bas, je dois les remonter vers le haut.

[Loralina]

Bonjour,

[humour]Vous avez voulu une épilation totale, j'ai donc épilé les sourcils, les cils et vous ai rasé le crâne. [/humour]

Pour prendre un exemple concret :
Sujet d'exercice/examen/entretien :
Mélanger aléatoirement un tableau en utilisant la fonction sort.

En plus de fournir le code demandé, il serait bien d'indiquer qu'il existe une meilleure méthode, performante et garantissant l'équiprobabilité, basée sur les permutations aléatoires.

j'admire votre gentilesse

Je garde généralement pour moi mes idées de répliques cinglantes.
Le problème de la provocation, c'est que cela donne envie de s'opposer à son interlocuteur et que le fond passe un peu derrière la forme.
C'est moyennement efficace pour amener les gens à réviser leur position, voire déceler les failles de sa propre analyse.

sauf que si on part de ce principe, alors le code du dessus est extrême car ça ramène à juste remplacer les cellules vides par 'rien' plutôt que de s'embetter à considérer des colonnes et des lignes (une matrice) et analyser les contenus, les noeuds child..etc.

Je ne comprends pas trop votre analyse du code de javatwister.

Son code parcourt les colonnes de haut en bas.
Quand il tombe sur une cellule au contenu vide, il déplace la cellule en la mettant tout en bas de la colonne.
Les cellules qui étaient en-dessous sont automatiquement remontées d'une case.

Comme quoi, dans le cas où vous n'aviez pas compris cela (ou alors c'est moi qui n'ai pas compris votre interprétation), l'aspect enrichissant (dont je parlais) de ce code peut vous concerner.

Un point positif à son code est que les propriétés des cases sont toutes conservées. Par exemple si une case rouge avec un texte dedans est remontée, la couleur suivra.
Par contre, il faut savoir qu'un déplacement de nœud s'accompagne d'un remaniement en interne avec un certain coût (qui peut être assez négligeable toutefois).
D'où encore une fois l'intérêt d'étudier les différentes approches qui ont été proposées.

[clavier12AZQSWX]

ce que m'a appris la solution de javatwister (même si elle est moins applicable sur mon terrain), c'est qu'avant je cherchais à intervertir les données (les vides par les remplies) et qu'il y a aussi une autre possiblilié : jouer sur la visibilité des éléments vides (par changement de Class) mais cela implique que les div soit affichées en piles (l'une en dessous l'autre) ce qui est le cas des éléments de type énumérator (ul li..)

[javatwister]

Après, je veux bien suivre la piste de NoSmoking et Loralina mais je trouve ça plus bavard et on recrée des contenus plutôt que de réorganiser les éléments:
http://javatwist.imingo.net/compact2.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
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
<style>
th,td{border:1px solid;width:10%;text-align:center}
th{background:lime}
</style>
</head>
 
<body>
<table>
    <thead>
        <tr><th>Colonne 1</th><th>Colonne 2</th><th>Colonne 3</th><th>Colonne 4</th><th>Colonne 5</th></tr>
    </thead>
    <tbody id="tb">
        <tr><td>C1 - L1</td><td></td><td>C3 - L1</td><td>C4 - L1</td><td>C5 - L1</td></tr>
        <tr><td>C1 - L2</td><td></td><td>C3 - L2</td><td>C4 - L2</td><td>C5 - L2</td></tr>
        <tr><td>C1 - L3</td><td>C2 - L3</td><td>C3 - L3</td><td>C4 - L3</td><td>C5 - L3</td></tr>
        <tr><td></td><td>C2 - L4</td><td></td><td>C4 - L4</td><td>C5 - L4</td></tr>
        <tr><td></td><td>C2 - L5</td><td>C3 - L5</td><td>C4 - L5</td><td>C5 - L5</td></tr>
        <tr><td>C1 - L6</td><td></td><td>C3 - L6</td><td>C4 - L6</td><td>C5 - L6</td></tr>
        <tr><td>C1 - L7</td><td>C2 - L7</td><td>C3 - L7</td><td>C4 - L7</td><td>C5 - L7</td></tr>
        <tr><td>C1 - L8</td><td>C2 - L8</td><td>C3 - L8</td><td>C4 - L8</td><td>C5 - L8</td></tr>
    </tbody>
</table>
<button id="go">compacter</button>
 
<script>
document.querySelector("#go").addEventListener("click",()=>{
        const tb=document.querySelectorAll("#tb>tr>td");
        const tr=document.querySelector("#tb>tr").cells.length;
        const tab=[];
        tb.forEach((v,i)=>{
                if(!tab[i%tr]){
                        tab[i%tr]=[]
                };
                if(v.textContent){
                        tab[i%tr].push(v.textContent)
                };
                v.textContent="";
        })
        tab.forEach((v,i)=>{
                v.forEach((w,j)=>{
                        tb[j*tr+i].textContent=w;
                })
        })
})
</script>
 
  </body>
 
</html>

[NoSmoking]

Ayant eu un peu de temps, j’ai repris le fil de la discussion que j’avais laissé en suspend !

sauf qu'en épreuve d'examen, ...

je crois que Loralina à tout dit et qu’effectivement les forums sont des lieux de partage et d’échange qui permettent à chacun d’apprendre et progresser.

Le code de javatwister est riche d’enseignements à savoir que parfois le simple fait de changer de structure HTML, donc d’approche, permet d’accroitre les performances, même si ce n’est pas toujours le premier objectif, tout en appliquant un code plus concis.

Il montre également que la manipulation du DOM, redoutée par tant de personnes, peut être parfaitement triviale.

- Traitement direct (devrait être rapide).

Dans l’absolu cela devrait effectivement être vrai mais ...

- Boucles traditionnelles (simple à comprendre pour un débutant).

J’ai tendance à diviser pour mieux régner même si cela peut apparaître plus lourd dans certains cas.

Après, je veux bien suivre la piste de NoSmoking et Loralina mais...

Ta façon d’aborder le problème a été ma première idée mais je n’aime pas me faire de nœuds au cerveau, même des petits pour un p'ti cerveau .

Tout ceci étant j’ai voulu comparer les différentes méthodes sur base d’une <table> de 10000 lignes, donc pas vraiment réaliste, et j’ai donc commis ce fichier pour test.
Pour info :

• on peut sélectionner le nombre de « trous » par tranche ;
• les temps s'affichent sur la page ;
• pour le reste je vous fais confiance.

Il est difficile de vraiment tirer des enseignements car chaque méthode tire son épingle du jeu suivant le nombre de cases à déplacer.

J’ai noté quand même que FireFox s’en sortait globalement mieux que Chrome et qu’effectivement la méthode Loralina s’en sort mieux sur les extrêmes.

[Loralina]

Bonjour,
Bon ben PAS merci pour le test, vu que mon code est largement à la traîne !
A croire qu'il a été imprégné d'ondes négatives pour le faire tourner au ralenti !
Heureusement, il existe un contresort :
debug.log(`${action} : ${Math.floor((end-deb)*(1-0.9*(action==='loralinaDefragTable')))} ms`);


Une chose qui me pénalise, je pense, c'est le ciblage des cellules : ar_ligns[j].cells[i].
javatwister profite d'un traitement natif ultra rapide pour document.querySelectorAll("tbody td").
Si j'essaie de faire la même chose avec deux boucles, ça prend facilement quatre fois plus de temps.

Du coup, j'ai exploité cet avantage et ajouté quelques optimisations supplémentaires :

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
const ar_cells=document.querySelectorAll("tbody td"); //cellules
const ar_ligns=table.rows; //lignes
const nb_nombLign=ar_ligns.length-1; //nombre lignes
const nb_nombColo=ar_ligns[0].cells.length; //nombre colonnes
for(let i=nb_nombColo-1;i>=0;i--)
	{
	for(let j=0;j<nb_nombLign;j++)
		{
		if(ar_cells[j*nb_nombColo+i].textContent==="")
			{
			let l=-1;
			for(let k=j+1;k<nb_nombLign;k++)
				{
				const ob_=ar_cells[k*nb_nombColo+i];
				const st_=ob_.textContent;
				if(st_!=="")
					{
					ar_cells[j*nb_nombColo+i].textContent=st_;
					j++;
					l=k;
					}
				}
			for(let k=j;k<=l;k++)
				{
				ar_cells[k*nb_nombColo+i].textContent="";
				}
			break;
			}
		}
	}

Avec ce nouveau code :
Sur Firefox, on a tous les trois des performances très proches, indépendamment du nombre cases vides (enfin, je n'ai pas testé à fond non plus).
Sur Chrome, les codes de NoSmoking et moi sont très proches, par contre, moins il y a de cases vides, plus le code de javatwister est long (reste à identifier quel aspect du code déplaît à Chrome).

[javatwister]

Et tu pourrais tester le code "listes" NoSmoking?
Parce que je ne me reconnais pas du tout dans celui que tu m'as attribué

[NoSmoking]

@Loralina :
Là il n' y a pas photo l'optimisation est top, je n'ai pas regardé le code dans le détail mais je l'ai intégré dans le fichier de test en ligne.

@javatwister :
Il s'agit du code que tu as mis au post #26.

Concernant ton code sur base de « listes » si je le fais cela ne sera pas avant septembre.

Concernant Chrome j'ai l'impression que sa gestion I/O à l'arbre Dom est moins efficace que celle de FireFox !?!