Accélérer l'insertion d'éléments dans le DOM

Version imprimable

02/01/2020, 21h41
olysmar2

Accélérer l'insertion d'éléments dans le DOM

Bonjour,

Je travail acutellement sur une grille qui doit m'afficher des données.
Pour chaque ligne, j'ai un template que je génère avec les datas.

Actuellement, quand j'insère mes 50 lignes, il y a un figeage de quelques secondes.
Je voudrais réduire ce temps et je voudrais connaitre les bonnes pratiques pour rendre les insertions dans le DOM
(ex: utiliser des class css plutôt que la balise style...)

Quelqu'un aurait-il un lien car je n'ai pas trouvé
Merci
Sylo
02/01/2020, 21h55
javatwister

Bonjour!

Citation:

...une grille...

...afficher des données...

...j'ai un template que je génère avec les datas....

...j'insère mes 50 lignes...

...les bonnes pratiques pour rendre les insertions dans le DOM...

...Quelqu'un aurait-il un lien car je n'ai pas trouvé

Le rapport avec JavaScript m'échappe un peu, là...
02/01/2020, 23h32
olysmar2

Ah bon...

Je dois rater un truc.

Pour chaque ligne de ma grille, je construit une div dans mon javascript $("<div style='fsdklfjlsdfl'/>").appendTo(...) etc...
C'est une grosse div qui contient d'autres div.

Une fois la div construite, je fait un $Div.appendTo($DivDeMaGrid).

L'insertion de 200 lignes fait un freeze de 10 secondes...

Je voudrais savoir ce que je peux améliorer dans mon code HTML ou ma méthodologie pour que l'insertion dans la DIV de ma grid prenne moins de 10 secondes...

Est-ce plus clair ?

Merci
Sylo
03/01/2020, 00h12
javatwister

En fait, je n'ai pas vu ton code... et je pense qu'il y a une section JQuery sur ce forum ;)
03/01/2020, 01h08
Beginner.

Salut,

Ben je ne sais pas exactement ce que tu fais alors juste une hypothèse si par exemple tu fais plusieurs insertions dans Le DOM alors cela pourrait aller plus vite en faisant qu'une seule insertion : tu construis tout (en mémoire) et tu insères le tout en une fois.

On peut aussi utiliser un fragment de document : https://developer.mozilla.org/fr/doc...cumentFragment ...
03/01/2020, 08h23
SpaceFrog

J'ai du poster il y a quelques années un script pour construire des tableaux rapidement ...

Ha le voilà https://www.developpez.net/forums/d4...us-rapidement/

@Spafy
Et même, en actualisant un peu ton code

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
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>...</title>
<style>
td {text-align:center;min-width:25px;border:solid 1px gray;font-size:8px;height:25px;
}
</style>
<script type='text/javascript'>
window.addEventListener("load",()=>{
console.time()
        BuildTable(document.body,100,100);
        console.timeEnd()
},false);
 
function BuildTable(parent,h,w){
        const xtable=document.createElement('table'),
        xtbody=document.createElement('tbody'),
        xtr=document.createElement('tr'),
        xtd=document.createElement('td'),
        t=[];
        for(let i=0;i<h;i++){
                t[i]=xtbody.appendChild(xtr.cloneNode());
        };
        t.forEach((v,i)=>{
                for(let j=0;j<w;j++){
                        v.appendChild(xtd.cloneNode()).textContent=i+"-"+j
                }
        }
        );
        xtable.appendChild(xtbody)
        parent.appendChild(xtable);     
}
</script>
</head>
<body>
</body>
</html>

03/01/2020, 15h38
javatwister

A noter: sous Fox (mais uniquement), passer par insertRow et insertCell est encore plus rapide.
07/01/2020, 01h39
jfactory

En effet les manipulations du DOM sont lentes. Comme indiqué par Beginner, la bonne approche (si tu n'utilises pas react par exemple) consiste à ne travailler qu'avec des chaînes textes afin de générer tout le HTML, puis à injecter le résultat en une fois dans le DOM via innerHTML (ou html() si tu utilise jQuery).

Cela pose un problème:
Si tu as des "écouteurs d'événements" à ajouter, il faudra les poser après l'injection. Dans ce cas, les "délégations d'événements" peuvent te simplifier la tache:
https://javascript.developpez.com/ac...en-JavaScript/

jQuery fait ça très facilement:

Code:

$("#maTable").on("click", "td", function(event) { var element = this })

https://learn.jquery.com/events/event-delegation/

Cela interceptera globalement les clicks sur les td, même s'ils n'existent pas encore. Tu peux ensuite identifier la cible via son id ou un attribut.

Citation:

Envoyé par javatwister

A noter: sous Fox (mais uniquement), passer par insertRow et insertCell est encore plus rapide.

non, ça marche partout :
https://caniuse.com/#search=insertRow
https://caniuse.com/#search=insertCell

et le fait d'utiliser 1 insertRow sur une table "vierge" crée automatiquement un tbody sur cette table

sion si on veut vraiment améliorer les performances il faut coder en JS pur (et pas en jQuery)

et sionon oui utiliser un element.cloneNode https://developer.mozilla.org/fr/doc...Node/cloneNode
est plus rapide si on doit répéter des document.createElement

ça donne ça:
Code:

1 2 3 4 5 6 7 8 9 10 function BuildTable(parent,h,w) { const xtable = document.createElement('table') for (let l=0;l<h;l++) { let RowZ = xtable.insertRow(l) for (let c=0;c<w;c++) { RowZ.insertCell(c).textContent = `${l}-${c}` } } parent.appendChild(xtable) }
moins de 80ms sur fireFox v71 Linux(et une fois 34ms avec uniquement FF ouvert) (et plus du quadruple sur chromium !)

un poil plus rapide ??:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function BuildTable_02(parent,h,w) { const xtable = document.createElement('table') , t = []; t[0] = xtable.insertRow(-1); const tBody = t[0].parentElement; for (let c=0;c<w;c++) { t[0].insertCell(c) } for (let l=1;l<h;l++) { t[l] = tBody.appendChild( t[0].cloneNode(true) ) } for (let l=0;l<h;l++) { for (let c=0;c<w;c++) { t[l].cells[c].textContent = `${l}-${c}` } } parent.appendChild(xtable) }
et j'ai pas "un PC de course"

07/01/2020, 09h41
javatwister

Citation:

Envoyé par psychadelic

non, ça marche partout :

Je parlais des performances: seul Ffx profite des méthodes de tableau;

Et le code que j'ai testé plus haut était déjà très rapide!
07/01/2020, 16h45
psychadelic

Citation:

Envoyé par javatwister

Je parlais des performances: seul Ffx profite des méthodes de tableau;
Et le code que j'ai testé plus haut était déjà très rapide!

Oui, dans ce cas la, je suis complètement d'accord.
C'est même étonnant que l'implémentation de [ insertRow , insertCell ] dans le moteur "Chrome" soit aussi désastreuse!

Mais sinon, effectivement ton code est déjà très rapide ;)
07/01/2020, 18h51
CosmoKnacki

Citation:

Envoyé par psychadelic

Code:

const xtable = parent.appendChild( document.createElement('table') )

En accrochant ton tableau dés le départ à l'arbre DOM, le navigateur devra opérer une reconstruction/réaffichage de la page à chaque ajout d'élément, alors que si tu l'accroches une fois terminé, il n'aura à le faire qu'une seule fois.
07/01/2020, 22h17
psychadelic

pas faux, j'ai corrigé mon code ;)