Lenteur javascript ie et pas sur firefox

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

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, 14h51

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, 14h58

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

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

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

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

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, 15h39

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

**Watilin** · 20/06/2015, 23h24

Il y a peut-être plus efficace que getElementsByTagName pour récupérer les éléments dont tu as besoin. À partir d'IE8 tu disposes de querySelectorAll qui te permet d'utiliser un sélecteur CSS. L'efficacité dépend du sélecteur, mais sache qu'une sélection par classe est plus efficace qu'une sélection par tagName, et une sélection par id est encore plus efficace (Lire CSS Performance Has Changed for the Better). Si tu connais à l'avance ta structure DOM, tu peux accéder à tes éléments par une combinaison de ces méthodes et de propriétés telles que childNodes, nextSibling, etc.

De manière générale, évite de passer par des chaînes (donc pas de split) car cela implique que tu devras faire appel au parseur HTML à la fin (typiquement avec innerHTML). Le parseur analyse la chaîne que tu lui donnes et construit l'arbre DOM correspondant ; si tu construis toi-même l'arbre DOM, tu sautes la partie analyse de chaîne.

Deux pistes à explorer :

**ouille123** · 21/06/2015, 00h39

Merci, je vais étudier vos réponses pour voir ce que cela pourrait donner.
Bonne soirée.

**ouille123** · 22/06/2015, 14h07

Bonjour, ce qui se passe c'est que j'ai un flux xml qui arrive qui est ensuite découpé. Je le reçois avec monfichier.xml.
Sauf que le getElementByTagName fait ramer (10* plus de temps que firefox). J'aimerais le remplacer par autre chose. Sauf que le selectorAll c'est pour du css.

Une partie du code concerné pour faire mon text:

Code :

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

1
2
3
4
5
6
7
var Contenu = Fichier('../xml/monfichier.xml');
max=Contenu.getElementsByTagName('ligne').length;
var compteur = 0;
for(l=0 ;l<max; l++) {
     var ligne=Contenu.getElementsByTagName('ligne')[l];
     compteur++
}

A quoi ressemble le xml:

Code xml :

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

1
2
3
4
5
6
7
<document>   
  <ligne>
      <blabla>1051</blabla>
      <blabla>3</blabla>
      <blabla>2015</blabla>
  <ligne>
</document>

**Watilin** · 22/06/2015, 16h27

Mise en cache

Code :

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

1
2
3
4
5
6
7
8
var Contenu = Fichier('../xml/monfichier.xml');
var lignes = Contenu.getElementsByTagName('ligne');
max = lignes.length;
var compteur = 0;
for (l = 0; l < max; l++) {
  var ligne = lignes[l];
  compteur++;
}

Et sinon je peux te garantir que querySelector et querySelectorAll fonctionnent sur du XML, je viens de vérifier. Dans la mesure où ton XML est bien formé, et où tu utilises la propriété responseXML de ton objet Ajax, tu devrais être en mesure de faire :

Code :

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

Contenu.querySelectorAll("ligne");

Si tu as mis des classes et des id dans ton XML, tu peux aussi utiliser les sélecteurs . et #. En gros, CSS n'a jamais été limité au HTML et fonctionne normalement avec XML (à part peut-être les pseudoclasses spécifiques comme :hover – ce n'est qu'une supposition personnelle).

Autrement, si tu connais un peu XPath, tu peux utiliser document.evaluate.

Attention, je ne garantis pas que querySelectorAll sera plus rapide. Comme je l'ai dit dans mon post précédent, l'efficacité dépend du sélecteur. Là c'est un sélecteur de tagName, donc a priori, on est dans les mêmes temps d'exécution qu'avec getElementsByTagName.

Il y a cependant une différence subtile : querySelectorAll renvoie une collection figée (static), alors que getElementsByTagName renvoie une collection vivante (live). Ça veut dire quoi ? Ça veut dire que si tu appelles l'une de ces méthodes et que tu mets le résultat dans une variable, et si la structure du DOM est modifiée avant que tu utilises cette variable, les changements seront répercutés sur la collection renvoyée par getElementsByTagName, alors que celle renvoyée par querySelectorAll continuera de représenter l'ancien état du DOM.

Il y a un JSPerf qui compare getElementsByTagName et querySelectorAll, malheureusement le site est indisponible au moment où j'écris ce post. J'ai trouvé un article de blog datant de 2010 expliquant que querySelectorAll est en réalité plus lent car, pour renvoyer une collection figée, il doit procéder à la copie de chaque élément au moment de l'appel.

C'est une chose que j'avais perdue de vue quand j'ai écrit mon post précédent, donc je dois m'excuser : querySelectorAll est a priori moins efficace que getElementsByTagName. Cependant, il trouve sa force dans l'utilisation des sélecteurs CSS complexes (exemples : nav a, div + p, etc.) qui obligeraient autrement à passer par des manipulations DOM supplémentaires. Et aussi, il permet de faire une sélection par classe sous IE8, où getElementsByClassName n'existait pas encore.

**ouille123** · 22/06/2015, 17h29

Bonjour, en regardant de plus près j'ai vu la même chose. Le code bouclait à chaque fois sur un nouveau tableau! Donc c'est normal que c'était plus long. Il fallait mettre en cache pour ne l'utiliser qu'une seule fois.

**ouille123** · 24/06/2015, 10h21

J'ai une question pour les pros sur javascript:

Mon programme récupère un flux XML que je met dans une variable. A cette variable je raccroche un "getElementsByTagName" suivit de ma balise que je veux récupérer:
FichierXml.getElementsByTagName('maBalise')[0].getElementsByTagName('CeQuiMinteresse')[0].firstChild.nodeValue)

Du coup c'est un objet qui me renvoi la première valeur enfant de maBalise avec firstChild+nodeValue.
Mais j'aimerais éviter de faire cela à chaque fois dans ma boucle. J'aimerais récupérer chaque éléments de mon Flux XML une fois et d'éviter après d'utiliser trop de getElements..Et firstchild etc. Pour alléger le code et le rendre plus rapide. J'ai des doutes sur mon explication, si elle est assez claire ou pas.
J'avais repéré 'for...in'. Si on pouvait éclairer ma lanterne.

Bonne journée

Lenteur javascript ie et pas sur firefox

JavaScript

Discussions similaires

Partager

Partager