Lenteur javascript ie et pas sur firefox

**ouille123** · 15/06/2015, 15h14

Bonjour, je suis face à un soucis:
J'ai une application qui utilise du php, javascript, ajax et du framework. Sauf qu'elle rame sur internet explorer et pas sur firefox lors de l'affichage d'un tableau qui tourne avec du ajax.

J'ai trouvé en mettant du code qui calcule le temps, l'endroit qui fait ramer ie. En gros, c'est une page qui doit charger 3000 informations dans un tableau. Les 2000 premières chargent de façon satisfaisantes. Par contre les dernières rames sans trop savoir pourquoi.
Sur firefox, la page charge en 2secondes alors que sur ie, il faut 10 fois plus de temps... le maximum de latence sous firefox est de 1millisecondes par moment alors que sous ie, après les 2k, quand il y a des montés c'est en moyenne 16 avec des piques à 30+.

J'ai idendifier que c'était le javascript qui remplissait le tableau qui ramait avant et pendant la boucle... Sauf que je n'ai pas trop d'idée d'ou cela vient.

Le problème vient du javascript. Si quelqu'un avait une idée?
Bonne journée

**Matthieu2000** · 15/06/2015, 15h51

ie, contrairement aux autres navigateur, affiche le tableau qu'après un calcul complet de tous les cellules. D'où la lenteur.
certains site conseille de faire avec des feuilles de style css pour éviter cela.

**ouille123** · 15/06/2015, 15h58

Salut, le tableau ne fait que prendre les infos qui lui sont envoyées. Il ne fait pas de calcule.

**Matthieu2000** · 15/06/2015, 16h19

c'est ie qui est lent avec les table. http://www.developpez.net/forums/d97...bleau-sous-ie/

**NoSmoking** · 16/06/2015, 23h22

Bonjour,
il est toujours facile de dire que IE rame lors de la construction de la page, ce qui est souvent vrai, mais c'est sans compter les maladresses des codeurs

En gros, c'est une page qui doit charger 3000 informations dans un tableau.

Est-il utile de faire afficher les 3000 informations, cela pourrait peut être être "paginé".

J'ai idendifier que c'était le javascript qui remplissait le tableau qui ramait avant et pendant la boucle...Sauf que je n'ai pas trop d'idée d'ou cela vient.

Pour que l'on puisse t'aider efficacement il serait bon de nous montrer le code de ta construction des informations en table.

Certaines erreurs sont à ne pas faire en matière de vitesse, il est possible de gagner un facteur parfois de 10 suivant la méthode utilisé, surtout valable quand cela rame comme dans ton cas. Même si tu ne pourras pas optimiser le moteur de rendu de IE tu peux toujours améliorer pour lui faciliter la vie.

● Il te faut bannir les insertCell(), insertRow() lorsque tu as du "monde" à créer, c'est une info MSDN.
● Il ne faut pas ajouter un élément sur un élément attaché au DOM mais plutôt attaché l'arbre terminé, typiquement pour les tables il est préférable de reconstruire une table complète avant d'attacher celle ci au DOM plutôt que d'ajouter des éléments à celle ci si elle se trouve déjà dans le DOM.

Je te mets 2 exemples de construction d'une table avec 3000 lignes de 10 colonnes et même si IE sans tire le moins bien, il n'y a pas mort d'homme par rapport à ce que tu annonces.

exemple 1 :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>Construction TABLE méthode DOM (propre)</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  padding:0;
  margin:0;
  font:1em/1.25em Verdana, Arial, sans-serif;
}
table{
  font-size:0.8em;
  border-collapse:collapse;
  border:1px solid #eef;
}
td{
  border:1px solid #eef;
  border-spacing:0;
}
</style>
</head>
<body>
<div id="info"></div>
<div id="result"></div>
<script>
var deb = new Date().getTime();
var lig, col,
    nbLigs = 3000,
    nbCols = 10,
    oCell, oCellClone,
    oRow,
    oTable = document.createElement('TABLE');
 
// création des lignes
for (lig = 0; lig < nbLigs; lig+=1) {
    oRow = document.createElement('TR');
    oCellClone = document.createElement('TD');
    // création des cellules
    for (col = 0; col < nbCols; col+=1) {
        oCell = oCellClone.cloneNode(false);
        oRow.appendChild(oCell);
        oCell.appendChild(document.createTextNode('Cellule : ' + lig + ':' + col));
    }
    oTable.appendChild(oRow);
}
document.getElementById('info').innerHTML += new Date().getTime() - deb;
document.getElementById('result').appendChild(oTable);
document.getElementById('info').innerHTML += '-' + (new Date().getTime() - deb);
</script>
</body>
</html>

exemple 2 :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>Construction TABLE injection (fast)</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  padding:0;
  margin:0;
  font:1em/1.25em Verdana, Arial, sans-serif;
}
table{
  font-size:0.8em;
  border-collapse:collapse;
  border:1px solid #eef;
}
td{
  border:1px solid #eef;
  border-spacing:0;
}
</style>
</head>
<body>
<div id="info"></div>
<div id="result"></div>
<script>
var deb = new Date().getTime();
var lig, col,
    nbLigs = 3000,
    nbCols = 10,
    html = [];
 
html.push('<TABLE>');
// création des lignes
for (lig = 0; lig < nbLigs; lig+=1) {
    html.push('<TR>');
    // création des cellules
    for (col = 0; col < nbCols; col+=1) {
        html.push('<TD>');
        html.push('Cellule : ' + lig + ':' + col);
        html.push('<\/TD>');
    }
    html.push('<\/TR>');
}
html.push('<\/TABLE>');
 
document.getElementById('info').innerHTML += new Date().getTime() - deb;
document.getElementById('result').innerHTML = html.join('');
document.getElementById('info').innerHTML += '-' + (new Date().getTime() - deb);
  </script>
 </body>
</html>

fais des tests pour voir.

Nota : les temps affichés ne sont pas à prendre au pied de la lettre mais à titre comparatif.

**ouille123** · 19/06/2015, 16h39

Bonjour, après plusieurs recherche supplémentaire, c'est ma construction qui remplit le tableau qui rame.
J'ai un "getElementsByTagName" pour remplir mon tableau sous javascript (avec ajax derrière) qui fait ramer.
Il prend donc un nom et se charge après de remplir mon tableau. Il me faudra donc la changer par un équivalent plus performant.
Ou bien utiliser une autre technique pour remplir mon tableau (.split() ?).

Bonne journée

Lenteur javascript ie et pas sur firefox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager