Bonne utilisation de json

Version imprimable

20/07/2009, 14h33
boo64

Bonne utilisation de json

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
20/07/2009, 17h26
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
21/07/2009, 08h22
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 ...
21/07/2009, 09h20
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. ^^

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:

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 :)

21/07/2009, 09h49
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.
21/07/2009, 09h52
boo64

tu me déconseille donc d'utiliser le append() de jquery ?

edit: en regardant ton exemple de creation de tableau est en effet trés rapide...

en gros jquery très bien mais pour une optimisation de la performance il vaut mieu passer par les fonctions natives de js?
21/07/2009, 09h53
SpaceFrog

si c'est pour appender du innerHTML ... oui
21/07/2009, 09h58
boo64

Citation:

Envoyé par SpaceFrog

si c'est pour appender du innerHTML ... oui

ok et comment appender comme il faut ? en recreant donc tout bien depuis le js et non passer une chaine de caractere comme je fais?

je suis bien?
21/07/2009, 10h04
SpaceFrog

avec le lien de creation de tableau donné et l'autre post des contributions sur la creation dynamique d'objets tu as tout pour créé totu ce que tu veux ...
ton objet json comporte les paramètres nécessaires à la creation , les script eux crééent les objets et tu appende les objets sur la page

donc j'ai suivi un peu ce que vous m'avez dit et j'ai transformé mon code comme cela:

le js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
		$('#ok').click(function()
			{	
				var BaliseTbody=xtbody.cloneNode(false);
                $.getJSON('ajax_prog.php?plaque='+$("#plaque option:selected").val(),
                    function(data) {
						alert(data.length);
                        var length = data.length;
						for (var x = 0; x < length; x += 1) {
							new AddLine(BaliseTbody,length,data[x].length, data[x]);
						}
						$('table').append(BaliseTbody);
                    }
                )
                return false;
            });

avec les fonctions de space frog suivantes retouchées

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function AddLine(DestBody,NrLines,NbrCells, Contenu){
var NewLine=xtr.cloneNode(false);
for(l=0;l<NbrCells;l++){
     new AddCells(NewLine,Contenu[l]);
     }
DestBody.appendChild(NewLine)      
 
}
 
function AddCells(DestLine,contenu){
var texte=xtxt.cloneNode(false);
var newCell=xtd.cloneNode(false);
texte.data=contenu;
newCell.appendChild(texte);
DestLine.appendChild(newCell);
}

et un exemple de php créant le json:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
include('connexion_meteo.php');
	$req=mysql_query('SELECT * from prog_mp order by dpt,code_nra ')or die(mysql_error());
	$json=array();
    // Create the array
		while ($res = mysql_fetch_row($req)) {
			$tab=array();
			foreach($res as $data){
				$tab[]= $data;
			}
			$json[]=$tab;
		}
    // Retourne la data a lappelant
   echo json_encode($json);

Verdict cela fonctionne mais pas vraiment de gain de chargement ... qu'en pensez vous?

edit: le tableau est un gros tableau de 40 colonnes environs et 1000 lignes

21/07/2009, 12h25
RomainVALERI

J'imagine que tu as déjà du l'envisager mais... avec autant de données pourquoi ne pas avoir fait le choix de paginer ? des contraintes particulières à ce niveau ? (quitte à charger l'intégralité progressivement par ajax tout en n'affichant que la première partie et de quoi naviguer dans les "pages" du tableau)
21/07/2009, 12h27
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é :mouarf:
----
21/07/2009, 12h40
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+

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:

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

21/07/2009, 14h05
boo64

Merci beaucoup pour vos réponses

donc alors

Citation:

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

Citation:

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)

Citation:

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

Citation:

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:aie:) avant de tester ou benchmarké des choses.

Citation:

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,...

Citation:

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

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

Code:

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:

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 :(

21/07/2009, 17h08
emmanuel.remy

Effectivement, sacré IE !

Passe alors plus simplement par:

Code:

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

ERE
21/07/2009, 17h16
boo64

:ccool:

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

encore quelque piste d'optim? ou mise à part la pagination pas grand chose à faire de plus
21/07/2009, 17h33
emmanuel.remy

Citation:

Envoyé par boo64

:ccool:

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

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

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

Code:

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...

21/07/2009, 17h48
boo64

nan pas gagner grand chose deux trois seconde c'est déjà ça

donc oui j'avais pensé à un plugin mais j'ai peur de ne pouvoir faire exactement ce que je veux faire quoique le jqgrid à l'air vraiment très bien

autre soucis à voir la rapidité sur une grosse table... je vais tester cela demain