Pour les données tabulaires, que rend plus rapide, CSS ou < TABLE > ;? [fermé]

Question

Je recherche des statistiques sur les navigateurs actuels sur le temps nécessaire au rendu d'un tableau avec du HTML pur par rapport à une méthode puritan CSS hackée qui évite l'utilisation du TABLE , TR , balises TD , etc.

Je ne cherche pas ce qui est approprié, mais plutôt ce qui est plus rapide , en particulier sur Firefox 3, même si les statistiques des autres navigateurs m'intéressent également. Les balises course TABLE sont conçues pour les tables. Ce n'est pas la question.

Answer 1

En général, je dirais d'utiliser < table > pour les données tabulaires. Toutefois, si la table est très longue (plus de 100 lignes, par exemple) et que le nombre de colonnes est faible (environ 3), l'utilisation de div pour émuler des lignes entraînerait une empreinte de balisage beaucoup plus petite. Ceci est particulièrement pertinent si vous utilisez le javascript de recherche dans le DOM (fourni par les nombreuses bibliothèques JS), car il serait avantageux de réduire la taille de l'arborescence DOM.

C’est par expérience que j’avais un tableau de ce type et que je cherchais des optimisations. Le passage à un affichage basé sur des div coupait le code HTML généré à un tiers et constituait une amélioration importante des performances de traversée du DOM.

Answer 2

Si vous avez réellement des données tabulaires, utilisez des tableaux. L'idée que vous ne devriez jamais utiliser de tables pour quoi que ce soit était une extension erronée du concept correct selon lequel vous ne devriez utiliser des balises HTML que dans le but sémantique auquel elles sont destinées. Cela signifie que vous utilisez CSS pour la mise en page, mais que vous utilisez des tableaux pour les données tabulaires. Cela ne signifie pas qu'il ne faut jamais utiliser de tableaux.

Answer 3

Étant donné que certains navigateurs attendent que l'ensemble du tableau ait été transféré pour l'afficher afin de s'assurer qu'ils ont bien ajusté la largeur de la colonne en fonction de la taille du contenu, l'utilisation de div sera probablement rendu plus rapide si vous recherchez pour une moyenne sur tous les navigateurs.

Cela étant dit, si vous avez besoin d'une table, utilisez-la.

Answer 4

Cette question ressemble à celle-ci: Pourquoi ne pas utiliser de tableaux pour la mise en forme au format HTML? , vous pouvez donc également consulter certaines des réponses .

En général, les navigateurs ne rendent pas de tableau tant que tout le tableau n'a pas été calculé, ce qui signifie que, du point de vue de l'utilisateur, un grand tableau est plus lent que le même contenu utilisant un style CSS à la place des tableaux. À une certaine époque, je travaillais avec une application Web qui utilisait des tableaux pour afficher une grille d'informations sur l'état. Cette opération était extrêmement intensive et très lente. Les mêmes informations affichées à l’aide de CSS étaient plus rapides et, plus important encore, elles commençaient à apparaître ligne par ligne au fur et à mesure du chargement, au lieu d’attendre la totalité du tableau, de sorte qu’il se sentait plus rapidement en tant qu’utilisateur final. Je suggérerais d'explorer l'utilisation de CSS pour afficher les données à l'aide d'un échantillon de données à des fins de test. C’est ce que j’ai fait pour confirmer que les tables étaient en réalité beaucoup plus lentes pour notre cas d’utilisation particulier.

Answer 5

Si vous utilisez CSS pour la mise en page et que vous vous conformez aux meilleures pratiques tout en conservant votre CSS dans un fichier séparé, votre CSS n'aura généralement besoin d'être téléchargé qu'une fois avant sa mise en cache, ce qui vous apportera les avantages de la mise en cache.

Si vous utilisez des tableaux pour la disposition, ceux-ci seront envoyés avec le code HTML pour chaque page, ce qui augmentera votre bande passante et vos temps de téléchargement.

Pour améliorer la vitesse de rendu des tableaux, vous pouvez toutefois essayer réglage de la disposition de la table: corrigé; pour voir si cela aide ..

Answer 6

Les différents navigateurs ont des performances javascript / css très différentes, il est donc très difficile de généraliser ici. Par exemple, IE7 a un moteur étonnamment lent et Chrome est incroyablement rapide. Firefox est quelque part entre les deux, dépendant si vous utilisez 2 ou 3.

Answer 7

Je ne prendrais pas la vitesse de rendu comme l’aspect le plus important ici. Les tableaux HTML sont conçus pour les données tabulaires. Mettre cela dans beaucoup de DIV ou plus serait totalement faux, à mon avis.

Answer 8

Comme la plupart des réponses ci-dessus, je dirais aussi que vous devez utiliser Tableaux si vous affichez des données tabulaires et des DIV si vous souhaitez contrôler la mise en page (à l'aide de CSS3). Contrairement à ce que l'on pourrait penser, les tables ne sont pas plus lentes que les DIV si vous définissez quelques propriétés, telles que colgroup, tout en conservant la mise en forme. Découvrez les détails de la procédure à suivre dans le lien suivant:

sites.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata

Answer 9

Pour les données tabulaires, utilisez un tableau. Les tableaux comportent toutes sortes de fonctionnalités intéressantes, telles que < thead > et < tfoot > , légendes, titres, légendes, etc. Tout ce dont vous avez besoin pour créer un tableau une table.

En outre, si le CSS ne fonctionne pas / n'est pas chargé / n'a pas d'importance, le tableau aura toujours l'air et fonctionnera comme il se doit.

Answer 10

Personnellement, d'après ce que j'ai lu, si vous présentez des données tabulaires, un tableau est plus approprié pour la tâche. Personnellement, j'ai trouvé que c'était plutôt vrai.

En ce qui concerne le nombre brut de "plus rapide", comme le mentionne @skaffman, cela dépend des navigateurs ... mais pour être "correct" il serait judicieux d’utiliser un tableau pour les données tabulaires.