toggleClass lent sur ie8

[arthuro45]

Bonjour

Sous firefox ce code surligne rapidement un tr, mais sous ie8 c'est lent et le surlignement prend du retard entre chaque ligne.

Seriez-vous pourquoi ?

Code :

1
2
3
4
 
$('#'+tab).on('mouseenter mouseleave', 'tbody tr', function(){
    $(this).toggleClass(classe);
});

le code est appelé dans ceci :

Code :

1
2
3
4
5
6
7
 
function chargerTableau(tab)
{
	$('#conteneurTab').load('infoTab.php #'+tab, function(){
               surligneTr(tab,'dessus');
        });
}

[ticroch]

Ba c'est souvent un probleme sous IE (généralement plus sous IE 6). Essaye peut etre avec les evenements mouseover/mouseout a la place de mouseenter/mouseleave, mais je ne suis pas sur que ce soit plus rapide.

Perso en entreprise j'étais passé directement par le CSS, ca allait bcp plus vite que le JavaScript :

Code :

1
2
3
4
5
6
7
8
 
table tbody tr td {
	background-color:#FFF;
}
 
table tbody tr:hover td {
	background-color:#8DBDD8;
}

Un truc comme ca te permet de changer facilement et plus rapidement (au moins pour IE) un tr lorsque la souris passe dessus.

[Bovino]

Chaque modification de style provoque un repaint ou un reflow.
Les tables HTML sont les éléments les plus lents à afficher pour le navigateur (spécialement pour IE) du fait, notamment, que leur structure "théorique" est rarement respectée et que les différentes dimensions sont souvent laissées libres : le navigateur doit alors tout calculer avant d'afficher.
Du coup, modifier un td au survol sur une grosse table, c'est assez peu optimisé...

Pour en savoir un peu plus : Reflows & Repaints: CSS Performance making your JavaScript slow? et plus spécialement Avoid tables for layout

Voir aussi l'extension pour Firebug Firebug Paint Events qui te donnera une idée de l'ampleur de la chose !

[arthuro45]

Je ne sais pas encore comment je vais optimiser ça, mais je viens de tester mon tableau HTML sous ie8 avec ietester et c'est beaucoup plus fluide

J'ai pas fini de chercher...

[arthuro45]

Perso en entreprise j'étais passé directement par le CSS, ca allait bcp plus vite que le JavaScript :

Effectivement j'ai gagné un peu en réactivé sur les lignes, ça devient tolèrable.

et que les différentes dimensions sont souvent laissées libres : le navigateur doit alors tout calculer avant d'afficher.

Tu suggères de mettre des dimensions au td (width,height) ?

Il serait préférable de passer à autre chose que des Table pour les données tabulaires ?