Réponse lente lorsque la table HTML est grande

Je suis en train de travailler sur une webapp pour les produits de gestion de données, dans lequel le produit de données sont affichées dans un tableau avec 4 colonnes (nombre d'index, SKU, une description du produit, et des actions).

Le problème, je suis confronté est que lorsque la table est devenue très large (>1000 lignes), la page est très lag, spécialement quand j'ai passez la souris sur une ligne (je l'ai défini tr:hover dans le CSS).

J'ai essayé de résoudre ce problème en affichant les données partiellement de charge et de plus lorsque l'utilisateur fait défiler vers le bas, en utilisant javascript:

if (tablesDIV.scrollTop> = tablesDIV.scrollHeight - (tablesDIV.clientHeight + 80)) {
  /*...*/
}

Il donne de bons résultats, mais cela l'empêche d'atteindre la dernière ligne en appuyant sur la touche Finet où un nombre important de lignes sont chargés, la page a été lag de nouveau.

Existe-il une solution à ce problème?

EDIT: Le code CSS associées à la table.

#tables thead th{border-bottom:1px solid #CCC;background-color:#F5F5F5;background-image:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#F1F1F1));background-image:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-o-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:linear-gradient(top,#F5F5F5,#F1F1F1);font-weight:700;cursor:default}
#tables tbody th{font-weight:700;text-overflow:none}
#tables tbody tr{background:#FFF;cursor:pointer}
#tables tbody tr:nth-child(even){background:#F8F9FC}
#tables tbody tr:hover{background:#CDE}

EDIT2: Demo.

Démo: http://jsfiddle.net/4dpGz/

source d'informationauteur Fong-Wan Chau