Sont de grands tableaux html lent?
J'ai été récemment à développer une application à l'aide de tables avec un grand nombre (plusieurs centaines) de lignes. Les lignes contiennent des données tabulaires et chaque ligne contient deux listes déroulantes, ainsi que le lien qui s'affiche caché lignes de la table directement au-dessous.
Je suis actuellement confronté à de longs délais lorsque vous tentez de sélectionner une valeur dans la liste déroulante, et lors de l'affichage de l'caché lignes de la table.
Est la table de la source de mon problème ici?
Combien d'articles dans chacune des listes déroulantes? Les listes répétés sur chaque ligne?
Il n'importe quel navigateur (HTML viewer) que vous utilisez?
Ajouté asp.net tag par @ErnieStrings commentaire de ma réponse. @ErnieStrings -- je suis aujourd'hui, je vais donc vous obtenir un échantillon de demain. En attendant, regardez <asp:gridview... après vous familiariser avec cela, mon exemple, et d'autres personnes que vous allez rencontrer, va faire beaucoup plus de sens.
Il n'importe quel navigateur (HTML viewer) que vous utilisez?
Ajouté asp.net tag par @ErnieStrings commentaire de ma réponse. @ErnieStrings -- je suis aujourd'hui, je vais donc vous obtenir un échantillon de demain. En attendant, regardez <asp:gridview... après vous familiariser avec cela, mon exemple, et d'autres personnes que vous allez rencontrer, va faire beaucoup plus de sens.
OriginalL'auteur ErnieStings | 2009-09-01
Vous devez vous connecter pour publier un commentaire.
De ce que je comprends, les tableaux HTML peut être semble être lent à rendre si largeurs ne sont pas explicitement mentionnées. Si ils ne le sont pas, le navigateur a la fin du chargement du contenu des cellules avant de pouvoir calculer le bon largeurs.
MSDN a quelques informations ici sur leur "Bâtiment à Haute Performance des Pages HTML" de l'article qui peut aider; ils suggèrent ce qui suit (concernant les tables spécifiquement):
OriginalL'auteur Donut
Le problème est plus que probable que le rendu des contrôles (100 sélectionnez les cases) plutôt que de la disposition de table. Combien d'objets sont là dans la liste déroulante? Est-il de la même façon dans tous les navigateurs sur différents systèmes d'exploitation?
Désolé d'être aussi vague, mais en général, les tableaux ne sont pas lente à rendre, mais sont méprisés à cause de leur manque d'accessibilité (même si bien sûr, une grande partie de l'idéalisme, c'est le fait que les lecteurs d'écran ne les aiment pas).
OriginalL'auteur Chris S
Je peux affirmer par expérience que c'est presque certainement les listes déroulantes qui sont à l'origine de la lenteur. Des Tables avec des centaines de lignes peut rendre presque instantanément si elles contiennent uniquement du texte, mais d'ajouter une liste déroulante pour chaque ligne, avec seulement quelques dizaines d'options, et même maintenant de 50 lignes va prendre beaucoup de temps.
Essayer de design autour de la nécessité pour les listes déroulantes dans les lignes de la table - si c'est une forme (et sinon, pourquoi auriez-vous des listes déroulantes?), demandez à l'utilisateur de sélectionner la ligne qu'ils souhaitent modifier, puis mettre le modifiable uniquement les commandes en ligne, soit via AJAX si vous êtes dans ce genre de chose, ou une approche plus traditionnelle de "vue détaillée".
OriginalL'auteur Martha
Je n'ai pas remarqué des ralentissements lors de l'affichage des tableaux statiques avec quelques milliers d'entrées, mais en ajoutant des effets comme le tri ou dynamique zebra-entrelacement peut rapidement s'embourbent même un navigateur moderne sur un ordinateur rapide. Assurez-vous que vous n'exécutez pas le JavaScript d'itérations à travers l'ensemble de la table.
OriginalL'auteur John Millikin
Ce que vous venez avec, test de l'approche dans un couple de navigateurs sur un couple de plates-formes, avec quelques machines plus lentes. Une fois, j'ai eu une application rapide partout sauf dans Safari pour Macintosh. Il s'est avéré être quelque chose sur la façon dont il a rendu les listes déroulantes. Il n'y a tout simplement pas de substitut pour l'expérimentation. Euh, je voulais tester.
OriginalL'auteur slothbear
Si vous savez quelle est la largeur de chaque colonne doit être, essayez de spécifier
table-layout: fixed
dans le CSS pour la table et voir si cela fait une différence (il devrait arrêter le navigateur en essayant de re-rendre l'ensemble de la table juste parce que vous avez basculé visibilité sur quelques lignes.)OriginalL'auteur searlea
IE ne gère pas très grand DOMs manipulations bien à tous.
Si vous avez deux sélectionne dans chacune des lignes et un lien, et supposons que chaque sélectionnez a 5 options (((5options + 1select) * 2) + 1 lien + 3tds + 1tr) au moins 17 DOM éléments par ligne. De Plus, si je ne me trompe pas, c'est à dire traite chaque élément de texte seul nœud DOM. Il faut donc ajouter un autre 10 nœuds DOM pour le texte déroulante et 1 pour le lien, c'est 28 DOM éléments par ligne.
OriginalL'auteur CaffGeek
Je suis d'accord avec les autres que ce n'est pas seulement votre table qui est à l'origine de la lenteur de chargement, mais la population de la liste déroulante.
Si cela vous aide, vous pouvez essayer de la pagination de votre table. Vous pouvez utiliser des frameworks JavaScript comme jQuery ou extjs pour la pagination et AJAX.
OriginalL'auteur