[IE6] Optimiser création des éléments
Bonjour,
j'ai un petit souci avec le moteur Javascript de IE6...
En effet, je souhaite créer une dizaine de milliers de cellules de tableau (td), j'ai donc testé plusieurs méthodes et j'aimerai savoir s'il y en a une plus optimale encore.
Pourquoi? Parce que IE6 est super lent. Là ou Chrome / FF mettent 1 à 3 secondes, IE en met une bonne vingtaine. :cry:
Je suis passé par Prototype au départ mais j'ai vite abandonné, plus d'une minute sur IE :mouarf:
Voici donc la solution que j'ai adopté :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.appendChild(tbody);
var trTemplate = document.createElement('tr');
var tdTemplate = document.createElement('td');
for(var i = 0; i < 100; i++) {
var tr = trTemplate.cloneNode(false);
tr.id = i;
for(var j = 0; j < 500; j++) {
var td = tdTemplate.cloneNode(false);
td.id = i + '_' + j;
td.innerText = i + '_' + j;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
document.body.appendChild(table); |
Ceci n'est qu'un exemple simplifié bien sûr mais reflète bien ma problématique.
J'ai fais le test en faisant un createElement par boucle, mais c'est se tirer une balle dans le pied. C'est donc comme ça que je suis venu a utiliser cloneNode.
Petites précisions :
- me dite pas de changer de navigateur, vous perdez votre temps, c'est impossible
- A faire en JS car le faire en PHP mettrait le serveur à genou étant donné qu'à terme, il y aura une bonne dizaine de connexions simultanées au serveur
:merci:
P.S : Test Chrome : 700ms ; Test IE8 : 8 secondes :cry:
