Discussion :

[boo64]

Bonjour à tous,
j'utilise json pour faire de l'ajax afin de charger une table petite question de performance

faut-il mieux encoder un table dimensionnelle avec tout les tr et les td et ensuite le lire en js puis l'afficher

ou c'est aussi bien d'encoder directement le html et de l'afficher directement?

je ne sais pas si je suis clair

Merci de vos réponses

Boo

[emmanuel.remy]

Salut,

En bref, ta question c'est "vaut il mieux passer par le DOM pour recréer un élément HTML de type table ou bien passer par un innerHTML" ?

Au delà de la guéguerre habituelle pour ou contre innerHTML, ce test semble montrer que innerHTML est plus rapide que la manipulation du DOM.

A tester en fonction de ton contexte.

Et si tu veux passer par le DOM, des instructions peu utilisées comme cloneNode boostent les opérations.

ERE

[SpaceFrog]

une contribution sur le DOM et les tableaux
http://www.developpez.net/forums/d47...hlight=tableau

et il y en a une autre (du meêm auteur )sur la creation dynamique d'objets à partir d'un json ...

[RomainVALERI]

Un autre facteur entre en compte : si la table à afficher doit, après génération, être à nouveau "accédée" par des fonctions, manipulée, redimensionnée, etc., il vaut mieux la construire proprement, par le DOM, malgré une légère (comme le dit ERE) perte de performance. Cela dit, dans le cas d'un simple tableau d'affichage, innerHTML est plus rapide en effet, et souvent plus facile à écrire quand on a pas trop l'habitude du DOM. ^^

[boo64]

le tableau étant amené à être de nombreuse fois manipulé je vais donc continué à utiliser le DOM

actuellement je procéder comme cela ce que je fais deja mais ma question était plus précise en faite actuellement j'utilise jquery pour simplifier un peu mon js et donc je procede comme cela:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$(document).ready(function () {
		$('#ok').click(function()
			{
                $.getJSON('ajax_prog.php?plaque='+$("#plaque option:selected").val(),
                    function(data) {
						//alert(data);
                        $('table').append('<tbody>'+data+'</tbody>');
                    }
                )
                return false;
            });

et le data envoyé est de la forme :

<tr><td></td> ........ <td></td><tr>

et donc je demandais s'il n'était pas préférable de passer via le data un tableau encodé en json et ensuite de boucler avec jquery pr l'afficher cette reflexion m'est venue en regardant cet article

http://www.learningjquery.com/2009/0...pend-correctly

Merci à tous pour vos réponses

[SpaceFrog]

niveau prise en compte par le DOM il vaut mieux que tous les éléments soient créés pas le DOM soit par createElement soit par cloneNode.

[emmanuel.remy]

Trois remarques:

1. A quoi correspond le xtr (j'ai ma petite idée mais suis pas sûr...) ?
2. 40 colonnes et 1000 lignes... une navigation page par page avec un chargement AJAX serait peut-être plus approprié.

ERE

EDIT: Romain m'a encore grillé
----

[BaBeuH]

Bonjour,

Juste par curiosité, quand tu dis que c'est long à charger, de quel ordre s'agit-il ? Parce qu'effectivement, un tableau de 1000 lignes x 40 colonnes, ce n'est pas si négligeable...

Sinon, as-tu essayé de voir comment se composait le temps d' "attente" ?
- Requête Ajax + traitement serveur + Reception des données "json" au niveau du client
- Construction du tableau une fois à partir des données

J'ai déjà eu des problèmes de performance sur des éléments html conséquents, et afin d'optimiser j'avais utilisé un chronomètre pour décomposer les différentes tâches...

L'utilisation du DOM est à préconiser pour la construction d'éléments par javascript, mais dans des cas tels que le tien la construction est bien plus lourde que par un innerHTML (la solution array + join, personnellement testée, est idéale)... Après tout dépend de l'utilisation du tableau ? Si ce n'est que de la consultation, je pense qu'innerHTML convient tout à fait.

A+

[emmanuel.remy]

Bon allez je me lance: si tu veux garder ton tableau de 1000 lignes tu peux faire un mix DOM innerHTML; plutôt que de recréer chaque cellule de chaque ligne, tu devrais créer une ligne modèle que tu clones et dont tu remplis chaque cellule par un innerHTML. Cela t'évitera la création manuelle via le DOM de toutes les cellules, et tu en à quand même 40000...

Code :

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

1
2
3
4
5
6
7
8
9
10
 
//on considère que xtr est ta ligne modèle
function AddLine(DestBody,NbrCells, Contenu){
var NewLine=xtr.cloneNode(true);
for(l=0;l<NbrCells;l++){
     NewLine.cells[l].innerHTML= Contenu[l];
     }
DestBody.appendChild(NewLine)      
 
}

ERE

[boo64]

Merci beaucoup pour vos réponses

donc alors

1. A quoi correspond le xtr (j'ai ma petite idée mais suis pas sûr...) ?
2. 40 colonnes et 1000 lignes... une navigation page par page avec un chargement AJAX serait peut-être plus approprié.

le xtr donc c'est mon element tr que j'ai crée plus tot comme ds la methode de spae frog

la navigation page par page oui si j'avais pu.... mais non enfaite ce tableau et la transposition d'une feuille excel et les utilisateurs grands habitués d'excel ne veulent pas entendre de pagination

Juste par curiosité, quand tu dis que c'est long à charger, de quel ordre s'agit-il ? Parce qu'effectivement, un tableau de 1000 lignes x 40 colonnes, ce n'est pas si négligeable...

oui le tps est de 10/20s la ou cela m'a surpris c que c'etait aussi long que la methode brute que j'utilisais avec le append de jquery mettait autant de temps surement que le append de jquery fait en fait un innerHTML je ne sais pas (je n'ai pas testé avec firebug je code exclusivement pour ie6 la)

Sinon, as-tu essayé de voir comment se composait le temps d' "attente" ?
- Requête Ajax + traitement serveur + Reception des données "json" au niveau du client
- Construction du tableau une fois à partir des données

oui le soucis est clairement déterminé c'est le temps de construction coté client APRES réception du json

J'ai déjà eu des problèmes de performance sur des éléments html conséquents, et afin d'optimiser j'avais utilisé un chronomètre pour décomposer les différentes tâches...

certe firebug très pratique pour ça mais je mettais à contribution l'expérience des membres de developpez en js (par rapport à un débutant comme moi) avant de tester ou benchmarké des choses.

Après tout dépend de l'utilisation du tableau ? Si ce n'est que de la consultation

non le tableau va devoir être resizable,filtrable,...

Bon allez je me lance: si tu veux garder ton tableau de 1000 lignes tu peux faire un mix DOM innerHTML; plutôt que de recréer chaque cellule de chaque ligne, tu devrais créer une ligne modèle que tu clones et dont tu remplis chaque cellule par un innerHTML. Cela t'évitera la création manuelle via le DOM de toutes les cellules, et tu en à quand même 40000..

oui en effet c'est une solution je m'en vais tester ça de ce pas

Merci à tous à l'écoute de tte nouvelle sugestion

[boo64]

Donc j'ai testé l'astuce de ERE mais une erreur sous ie6 sous firefox cela passe...
les fonctions modifiées:

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
function AddLine(DestBody,LineModele,NrLines,NbrCells, Contenu){
var NewLine=LineModele.cloneNode(true);
for(l=0;l<NbrCells;l++){
     NewLine.cells[l].innerHTML= Contenu[l];
     }
DestBody.appendChild(NewLine)      
}
 
function AddCells(DestLine){
//var texte=xtxt.cloneNode(false);
var newCell=xtd.cloneNode(false);
//texte.data='';
//newCell.appendChild(texte);
DestLine.appendChild(newCell);
}

et le js principal modifié aussi

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
  $.getJSON('ajax_prog.php?plaque='+$("#plaque option:selected").val(),
                    function(data) {
					//creation du tbody et de la ligne de ref
						//alert(data.length);
						var BaliseTbody=xtbody.cloneNode(false);
						var ModeleTr=xtr.cloneNode(false);
						var length = data.length;
						var lengthTr=data[0].length;
						for(l=0;l<lengthTr;l++){
							AddCells(ModeleTr);
						}	
						//alert (lengthTr);						
						for (var x = 0; x < length; x += 1) {
							new AddLine(BaliseTbody,ModeleTr,length,lengthTr, data[x]);
						}
						$('table').append(BaliseTbody);
                    }

l'erreur de ie est sur cette ligne NewLine.cells[l].innerHTML= Contenu[l];

il ne reconnait pas cells[l] comme un objet ou le considére comme null

j'ai testé en remettant du contenant à la création de la ligne modèle mais aucun succès

[emmanuel.remy]

Effectivement, sacré IE !

Passe alors plus simplement par:

Code :

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

NewLine.getElementsByTagName("TD")[l].innerHTML= Contenu[l];

ERE

[boo64]

en effet cela marche bon b voila moi qui voulait faire un truc simple avec juste un peu de jquery c raté...

encore quelque piste d'optim? ou mise à part la pagination pas grand chose à faire de plus

[emmanuel.remy]

en effet cela marche bon b voila moi qui voulait faire un truc simple avec juste un peu de jquery c raté...

encore quelque piste d'optim? ou mise à part la pagination pas grand chose à faire de plus

T'as gagné beaucoup en clonant les lignes ?

Sinon puisque tu es avec JQuery, t'as pensé à utiliser un plugin tout fait
Style jqGrid ou flexiGrid ?

ERE

[BaBeuH]

As-tu essayé une solution "full" innerHTML du style :

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
 
$.getJSON('ajax_prog.php?plaque='+$("#plaque option:selected").val(),
	function(data) {
		var retour = new Array();
		retour.push("<TABLE>");
		retour.push("<THEAD>");
		retour.push("<TR>");
		// ligne d'entête pour gérer les tris ?
		retour.push("</TR>");
		retour.push("</THEAD>");
		retour.push("<TBODY>");
		var nbLignes = data.length;
		for (i=0;i<nbLignes;i++)
		{
			retour.push("<TR>");
			var nbCellules = data[i].length;
			for (j=0;j<nbCellules;j++)
			{
				retour.push("<TD>"+data[i][j]+"</TD>");
			}
			retour.push("</TR>");
		}
		retour.push("</TBODY>");
		retour.push("</TABLE>");
 
		$('table').innerHTML = retour.join("");
	}

Après, tu peux affiner pour gérer l'interactivité en rajoutant les évènements en dur via le innerHTML ou via des "addEventListener" une fois le innerHTML "rattaché" au document...