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
Vous devez vous connecter pour publier un commentaire.
La première chose qui est en train de ralentir votre boucle vers le bas est
.insertRow()
. Vous faites ceci en haut de la boucle, puis en ajoutant des cellules. Après la ligne est ajoutée, et après chaque cellule est ajoutée, le navigateur est en train de faire de mise en page de calculs. Au lieu d'utiliser.createElement()
et puis.appendChild()
à la fin de votre boucle.Démo: http://jsfiddle.net/ThinkingStiff/gyaGk/
Remplacer:
Avec:
Et ajoutez ceci à la fin de votre boucle:
Qui permettra de résoudre votre vitesse de chargement d'une question. Comme pour le décollage, vous avez beaucoup trop de règles CSS qui affectent votre
tr
ettd
éléments à l'aide des sélecteurs de balise. J'ai enlevé un peu, et les classes utilisées sur quelques-uns, et placez la surbrillance est beaucoup plus rapide. Plus précisément, j'ai remarqué queoverflow: hidden
sur letd
éléments de la ralentir considérablement. Envisager de combiner certaines de vos règles, à l'aide de plus simple, les sélecteurs, et l'ajout de classes d'éléments plus rapide de la CSS de traitement. Au cours de passez beaucoup de choses doivent être recalculés par le moteur de mise en forme, et le moins de règles CSS le mieux. Un exemple que j'ai vu dans votre code a été#tables tbody tr
quand il n'y avait qu'untbody
dans le tableau.#tables tr
aurait suffi. Mieux que l'autre de celles-ci est une classe. J'ai utilisé.row
dans ma démo.Les meilleures pratiques de Google Page Speed:
table tbody tr td
body section article
(body
jamais eu besoin)body *
ul li
ul > li > a
form#UserLogin
(#
est déjà spécifique)si votre table a régulièrement des colonnes (sans colspan et/ou rowspan) vous pouvez améliorer un peu le rendu temps l'application de la
table-layout:fixed
propriété:MDN: https://developer.mozilla.org/en/CSS/table-layout
Aussi, comme dans n'importe quel élément HTML dans le navigateur chrome, l'ajout de "transformer: rotateX(0deg);" à l'élément de la table des forces de l'accélération matérielle pour le coup, l'accélération du défilement de façon significative (si c'est bien le problème).
Les tableaux doivent être téléchargés et de rendre pleinement avant qu'ils soient affichés, figurant sur une période plus longue à s'afficher. Ce laps tout dépend de la puissance de traitement:
Sont de grands tableaux html lent?
Pour le nombre de lignes que vous avez, je suis surpris de vous voir un notable retard, bien que vous pouvez essayer quelques choses à partir d'ici, pour nous aider à vous aider:
Si vous travaillez avec de très grandes tables (disons, 5000 ou même de 500 000 lignes), je vous recommande un petit plugin appelé Clusterize. Vous n'avez même pas besoin de jQuery pour l'utiliser. L'idée est semblable à chargement différé des images, et il fonctionne très bien dans la pratique.
Je trouve que mettre un grand tableau dans un div, il est préférable d'utiliser un setTimeout. Cela semble accélérer de manière significative dans Chrome lors du stockage de la table dans une var d'abord, puis l'appel de la fonction dans un setTimeout.
Cheers!
B55