Discussion :

[topolino]

Bonjour,

J'essaye avec mon serveur de push de rafraichir des données cote HTML. J'essaye de trouver la manière la plus efficace de le faire.
Pour cela je n’utilise aucun Framework donc j'utilise que du Javascript "pure".

Si j'ai une dizaine de lignes avec une dizaine de colonnes à afficher et a raffraichir plusieurs fois par seconde, qu'elle est a votre avis la meilleur facon de le faire.

HTML
<table> ?
<ul><li>?

Javascript
Manipuler le DOM ?
Tableaux à n dimension ?

Pour l'instant j'ai opté pour ul li mais je trouve les performances pas terrible, Pour l'instant pour l'exemple j'affiche et mets à jour un seul champ

Code :

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

1
2
3
4
5
6
7
8
9
var li = document.getElementById("requestId" + requestId);
if (li === null) {    
    var li = document.createElement('li');
    li.setAttribute('id', 'requestId'+requestId)
    li.innerHTML = time;
    $instruments.appendChild(li);
} else {
    li.innerHTML = time;
}

Merci pour vos conseils

[topolino]

J'utilise les createDocumentFragment et j'ai gagné 50% de perf.
Si vous avez des idees je suis preneur.

Comment afficheriez vous les resulats pour que ca ressemble a un tableau ?
ul li span span span li span span span li span span span.... ou table ou autre ?

[Bovino]

Comment afficheriez vous les resulats pour que ca ressemble a un tableau ?

Ca dépend beaucoup de tes contraintes, mais si tu en as la possibilité, un affichage flex est une bonne alternative.

EDIT : en tout cas, pas de table, c'est ce qu'il y a de pire à afficher niveau performances !

[topolino]

Je suis en HTML5, Flex c quoi ? comme Flash ?

[Bovino]

Pas du tout, c'est du CSS !
Redécouvrez la mise en page avec Flexbox.

[Watilin]

Si les données ont une structure de tableau, je ne vois pas de raison de ne pas utiliser <table>. Avec la règle CSS table-layout: fixed compatible IE5 (doc), la performance me semble tout à fait satisfaisante.

[topolino]

Il y a 2 choses dans mon projet,
1 - l'affichage en forme de tableau des données (l'affichage se fait dynamiquement en fonction de ce qui arrive)
2 - Mise à jour des données deja presente dans le tableau.

Par exemple j'ai vu que innerHTML crée bcp de fuite de memoire.

[SylvainPV]

Ben si tu veux afficher un tableau utilise <table>, pas besoin de tergiverser longtemps là-dessus Je ne comprends pas pourquoi la question a dérivé sur du CSS

Si la valeur des cellules doit être mise à jour, c'est pareil, pas la peine de se creuser la tête pour trouver une solution plus rapide qu'une autre. Garde une référence en mémoire des cellules et mets à jour le contenu via textContent.

Les solutions les plus évidentes sont souvent les meilleures

http://jsbin.com/pehafupavo/2/edit

[topolino]

Wow vraiment bluffant.

Je ne connaissais ni requestAnimationFrame, ni querySelector et encore moins querySelectorAll.

Merci je vous tiens au courant.

[topolino]

Code :

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

1
2
var td = document.createElement("td");
cells.push(td);

Le faite d'avoir un tableau ayant les références de l’élément créé, augmente vraiment les performance ?
La reference evite t 'il de reparcourir le DOM ?

L'exemple (http://jsbin.com/pehafupavo/2/edit) consomme pas mal de CPU et il y a des fuites de memoires.

Je test avec Chrome

[SylvainPV]

Le faite d'avoir un tableau ayant les références de l’élément créé, augmente vraiment les performance ?
La reference evite t 'il de reparcourir le DOM ?

Ben oui, si on a plus de référence il faut retourner aller chercher l'élément à chaque tour de boucle, c'est long (moins long que le changement de textContent toutefois).

L'exemple (http://jsbin.com/pehafupavo/2/edit) consomme pas mal de CPU et il y a des fuites de memoires.

requestAnimationFrame fait tourner l'animation à 60 fps (parfois même plus selon les navigateurs), donc c'est normal que le CPU monte un peu. Après je doute que tu ais besoin de changer tes valeurs aussi souvent, là c'était juste pour la démo. Pour les fuites mémoire, tu peux préciser à quoi tu fais allusion ? L'animation tourne en continu donc je ne vois pas ce qui pourrait "fuiter".

[topolino]

Lorsque tu regardes avec le task manager de chrome (shift + Esc) la colonne Memory, tu peux constater que la Memoire ne cesse d'augmenter.

[SylvainPV]

Ouais enfin 4 ko toutes les 5 secondes y'a pas de quoi en faire une maladie...

[Sergejack]

Wow vraiment bluffant.

Je ne connaissais ni requestAnimationFrame, ni querySelector et encore moins querySelectorAll.

Merci je vous tiens au courant.

Tu peux te faciliter en utilisant jQuery (super simple) plutôt que de jongler toi-même avec des findByTagName, querySelector, etc.
Puisque tu connais CSS, tu sais comment accéder à un élément du DOM par un sélecteur, ben jQuery c'est aussi simple que ça.

Code javascript :

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

$('DIV.MaClassCss').text('Te fais même pas chier avec creatText...');

Sinon, pour ton problème de perf, tu l'as vu avec le fragment, le mieux est de construire ton contenu (NB: facile à faire avec jQuery) et de rajouter le tout, d'un seul coup à ton document.

Pour l'anecdote, j'ai récemment voulu faire ça avec des listes (<select>) de 1.000 options : ça reste un gros coup de frein dans les perfs même de nos jours...

[Watilin]

@SergeJack : on parle de performance ici. jQuery est hors de propos car ce framework n'est pas conçu pour réaliser des animations performantes.
Lire http://davidwalsh.name/css-js-animation.

[Sergejack]

Je n'ai pas cité jQuery pour ses performance mais pour la facilité qu'il apporte à l'écriture.

Par ailleurs il me semble que le sujet est l'ajout dynamiques d'élément et non leur animation.

[SylvainPV]

Plus précisément la modification d'éléments. Et topolino a bien précisé dans son premier post :

Pour cela je n’utilise aucun Framework donc j'utilise que du Javascript "pure".

d'autant que jQuery a un intérêt très limité ici

Code :

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

monDiv.textContent = 'Te fais même pas chier avec jQuery...';

[Sergejack]

SylvainPV s'exclama "Abracadabra !" et monDiv apparu.

Que je sache l'auteur n'a pas dit vouloir se priver de frameworks, il a juste dit ne pas en faire (encore) usage.

J'utilise jQuery depuis bien 3 ans (ou plus) et je regrette de ne pas l'avoir fait plus tôt.
Alors quand quelqu'un commence à s'intéresser à querySelectorAll (! IE8+) et autres, fort de mon expérience, je lui rend service en lui mettant jQuery sous le nez.

[SylvainPV]

https://github.com/termi/ES5-DOM-SHIM
J'utilise jQuery depuis sa version 1.0 et je regrette de l'utiliser encore par réflexe là où il n'y en a pas besoin mais on dérive du sujet...

[topolino]

Justement je ne veux pas utiliser Jquery que j'ai deja pas mal utilisé dans le passé.
Je suis en train de faire un terminal financier (des milliers d'update/sec) avec un serveur de push (bourse americaine).

C'est pour cela que je cherche la performance et je fais la chasse au moindre fuite de mémoire. Sur un petit exemple je perds 4Ko, mais avec ce que je suis en train de faire ca se mesure en Mo.