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

**olysmar2** · 02/01/2020, 21h41

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

**javatwister** · 02/01/2020, 21h55

Bonjour!

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

**olysmar2** · 02/01/2020, 23h32

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

**javatwister** · 03/01/2020, 00h12

En fait, je n'ai pas vu ton code... et je pense qu'il y a une section JQuery sur ce forum

**Beginner.** · 03/01/2020, 01h08

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

**SpaceFrog** · 03/01/2020, 08h23

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/

**javatwister** · 03/01/2020, 13h21

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

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager