Est-il une limite sur le nombre d'éléments html, le navigateur peut afficher sans problèmes?

Au fond, j'ai une table immense, qui devient encore plus importante que l'utilisateur fait défiler vers le bas (auto préchargement les lignes suivantes). À un certain point, le navigateur devient lent, il commence à accrocher un moment que je clique sur autour de ou essayez de faire défiler et de plus en plus lent, il devient, plus le nombre de lignes qu'il obtient. Je me demande si il n'y a aucune limite sur le nombre d'éléments que la page peut contenir? Ou peut-être que c'est juste mon javascript fuite quelque part (même si j'ai seulement un gestionnaire d'événement, attaché à la tbody de la table et un script qui analyse barboter les événements mousedown).

Mise à jour: Retard devient perceptible après un millier de chargé de lignes. La vitesse de défilement est très supportable, mais par exemple de mettre en évidence les cliqué ligne (avec l'aide de l'unique gestionnaire d'événement sur tbody) est douloureuse (il faut au moins 2 à 3 secondes et le délai augmente avec le nombre de lignes). J'observe retard sur tous les navigateurs. Ce n'est pas seulement à moi, mais presque tout le monde qui visite la page, donc je suppose que dans une certaine mesure cela affecte chaque plate-forme.

Mise à jour: je suis venu avec un exemple simple ici: http://client.infinity-8.me/table.php?num=1000 (vous pouvez passer quel que soit le nombre que vous voulez num), en gros, il rend une table avec num lignes et a un seul gestionnaire d'événement attaché à une table parent. Je dois en conclure, qu'il n'y est pas perceptible déroulant dans la performance, causée par le nombre d'éléments enfants. Donc c'est probablement une fuite quelque part d'autre 🙁

pour compléter la réponse de poster votre code/url s'il vous plaît (c'est tout deviner sans qu')
Ok, je ne peux pas poster le lien vers la page d'origine, puisqu'il n'est pas public. Je vais venir avec une page d'exemple.
Je voudrais en désaccord qu'il n'est pas perceptible déroulante de la performance IE. Si vous le réglez à 1, puis de le réinitialiser à 2000, il y a 2-3 seconde de latence avant que le tableau commence à rendu (puisque, comme indiqué ci-dessous dans ma réponse, c'est à dire attend à charge de la totalité de la table avant de le rendre)

OriginalL'auteur jayarjo | 2010-07-04

  1. 4

    Je ne pense pas qu'il y est une limite définie par la norme. Il y a peut être une limite codée en dur dans chaque navigateur de mise en œuvre, bien que j'imagine que cette limite est susceptible d'avoir des milliards d'éléments. Une autre limite est la quantité de mémoire adressable.

    Pour résoudre votre problème: ainsi Que le chargement automatique des éléments que vous faites défiler vers le bas, vous pouvez automatiquement décharger ceux qui ont défiler vers le haut hors de l'écran. Ensuite, votre programme va rester rapide, même après avoir fait défiler beaucoup.

    Vous pouvez aussi songer à une interface de rechange telles que la pagination.

    Je suppose que le déchargement est le choix (au moins, il va travailler avec ce que j'ai sans une grosse réécriture). Mais j'aimerais savoir exactement ce qui se passe pour l'avoir à l'esprit pour l'avenir, probablement que c'est un sujet pour les autres questions, avec celui-ci, je voulais savoir si il y a aucune limite sur le nombre d'éléments dans une page unique. Pour être en mesure d'environ estimer les limites possibles.

    OriginalL'auteur Mark Byers

  2. 6

    Une autre chose que vous devriez regarder est le tableau de dimensionnement. Si vous avez votre table de style avec table-width:auto; le navigateur doit mesurer chaque élément dans le tableau de taille. Cela peut être un incroyablement lent.

    Au lieu de cela, choisissez une largeur fixe ou au moins le style de la table à l'aide de table-width:fixed.

    +1 pour la fourniture de l'aide dans la réduction des limitations ou la latence constatée par les OP sans mentionner la CPU, de la RAM ou le navigateur. 🙂
    Merci pour observation intéressante, sont une telle chose mesurée ou comparé n'importe où? Ma table a une largeur fixe et j'observe à cette montée de retard dans tous les navigateurs, particulièrement sensible, il est dans IE7/8 et FF (avec FireBug éteint). Comme CPU - je ne suis pas sûr de la façon de les mesurer, avez-vous eu un lien vers une ressource précieuse sur le sujet?

    OriginalL'auteur Dave Markle

  3. 4

    Si vous avez JS sur chaque ligne de la table puis de vieux ordinateurs ne seront pas gérer cela. Pour le code HTML lui-même, vous ne devriez pas vous inquiéter beaucoup.

    Qui devrait vous inquiéter fait que l'être humain normal n'aime pas les grandes tables c'est ce que la pagination est faite pour. Séparés à l'aide de la pagination pour une meilleure ergonomie, ni d'autres préoccupations.

    Pense de livre qui n'a pas de pages, mais une grande page, voulez-vous de lire? Même si vos yeux (PC, dans notre cas) peut s'en occuper.

    OriginalL'auteur eugeneK

  4. 0

    Je ne pense pas qu'il y a une limite.
    Cependant, plus d'un fichier HTML est, le plus de ressources, votre ordinateur aura besoin. Mais le tableau est très grand alors...

    OriginalL'auteur JochenJung

  5. 0

    La limite est vraiment déterminée par l'agent de l'utilisateur et du client de machine utilisé. HTML, de la même manière que XML est un arbre de format de données. Donc plus d'éléments, plus dans l'arborescence du navigateur du client est à la recherche pour le rendu de la page.

    J'ai eu des problèmes de l'ajout de plus de 100 tables à un div (comme une vieille solution de contournement pour IE6 ne pas être en mesure de créer les éléments de la table de façon dynamique).

    Quel était le problème avec IE6 ne pas être en mesure de créer les éléments de la table de façon dynamique? Il y a 2 questions que je connais: 1, c'est que si vous créez à l'aide de .appendChild() vous devez vous assurer que vous avez/ajouter un tbody si vous souhaitez ajouter TR lignes. La deuxième, c'est que vous ne pouvez pas utiliser innerHTML par exemple TableElem.innerHTML = '<tr><td>....</td></tr>'; d'un bug qui existe dans IE aujourd'hui, grâce à Eric Vasilik 14 ans de bug: ericvasilik.com/2006/07/code-karma.html
    IE 6 ne me permet pas d'utiliser document.createElement("table"). Je pense que c'est le problème d'avoir un élément tbody. C'était tout à fait il ya un moment (nous n'avons pas boire de 9 ans au lait 😛 ).

    OriginalL'auteur Russell

  6. 0

    Quel navigateur utilisez-vous? Certains navigateurs peuvent gérer les choses mieux que d'autres - par exemple, si vous utilisez IE, je ne serais pas surpris si c'est lent - il ne gère pas les événements javascript ainsi que les navigateurs basés sur webkit.

    L'autre chose, c'est évidemment votre ordinateur (RAM et CPU). Mais pour être honnête, la plupart des ordinateurs ne devriez pas avoir un problème avec ça, à moins que nous parlons de 10000+ lignes... et même alors...

    Pouvez-vous mettre un peu de code?

    OriginalL'auteur xil3

  7. 0

    Étant donné qu'il existe une multitude de navigateurs et des moteurs de rendu et tous ont différentes caractéristiques de performance et aussi, étant donné que ces moteurs deviennent progressivement améliorée en ce qui concerne les performances et le matériel informatique devient plus rapide de tous les temps: non, il N'est pas supérieure fixe des limites à ce qu'un navigateur peut gérer. Cependant, il y a des limites supérieures sur un matériel spécifique pour certaines versions de navigateurs.

    Si vous ne définissez pas plus que votre matériel et de votre navigateur, s'il est difficile de vous aider. Aussi, personne ne peut faire aucune suggestion en ce qui concerne les performances possibles de votre Javascript si vous ne publiez pas le code. Même si c'est juste un gestionnaire d'événement, si elle boucle infinitly ou si elle est appelée pour chaque élément, il peut ralentir considérablement le processus de rendu.

    OriginalL'auteur Janick Bernet

  8. 0

    Nevermind de RAM ou CPU utilisation, quelle est la taille réelle du fichier après qu'il met en?

    Si votre table est vraiment énorme, vous pourriez obliger à vos utilisateurs de télécharger mégaoctets de données, j'ai trouvé que certaines machines ont tendance à se bloquer après 2-4 MO de données.

    Il charge les données de manière dynamique, en général, il n'était pas destiné à être limité (comme je n'étais pas au courant de toute contraintes, j'ai pensé que si il n'y aurait aucune limite, ils seront plus de millions, voire des milliards). Maintenant le coup devient visible après 1 ou 2 milliers de lignes.

    OriginalL'auteur Damien Dennehy

  9. 0

    Dépend. Savoir, par exemple, ne commencera pas le rendu d'une table jusqu'à ce que tout le contenu est chargé. Donc, si vous aviez de plus de 5 000 de lignes de la table il doit charger tous les 5 000 lignes de données avant d'effectuer le rendu de tout ça alors que d'autres navigateurs de commencer le rendu une fois qu'ils ont données partielles et juste s'adapter un peu (si nécessaire) comme le tableau grandit.

    Généralement rendu ralentit avec la quantité de nœuds, mais aussi à la complexité des nœuds... Évitez les tables imbriquées, et si possible, essayez de casser immenses tables en morceaux... E. g. Toutes les 100 lignes (si possible)

    Je crois que c'est à dire, tout comme tous les autres navigateurs, ne le rendu de la table pendant le téléchargement si vous avez spécifié les largeurs de colonne dans le code html. Si les largeurs ne sont pas spécifiés, le navigateur doit télécharger l'ensemble de la table afin d'être en mesure de calculer les largeurs.
    Incorrect. Vous pouvez voir IE comportement dans l'action par la création d'une table (disons 20 lignes), spécifier les largeurs que vous voulez, et insérer un script balise à des emplacements aléatoires dans votre tableau de td tags avec une alert('in row X');. Vous recevrez les alertes dans IE (toutes) avant d'une seule pièce de la table rend. Si vous chargez cette page dans Firefox, Chrome, Safari ou Opera, vous obtiendrez les alertes simultanément au tableau rend.

    OriginalL'auteur scunliffe

  10. 0

    Il n'est pas vraiment la raison dans le monde pour la publication de la totalité d'un vaste ensemble de données sur une seule page. Si l'exigence est de fournir à l'utilisateur toutes les données, alors vous devez l'exporter vers un fichier qui peut être lu par certains logiciels de meilleure qualité que d'un navigateur.

    Au lieu de cela, je vous suggère de faire une requête AJAX de la page dynamique, où vous permettez à l'utilisateur de voir une partie des données et s'ils ont besoin de voir d'autres, il suffit de télécharger la partie de l'ensemble de données et de remplacer l'actuel jeu de données sur la page. C'est la pagination. La recherche Google est un excellent exemple de cela.

    OriginalL'auteur Gert Grenander

  11. 0

    S'il y a des limites, il dépend du navigateur. Mais le problème que vous avez-il pas de limite, puisque le navigateur affiche toujours la page.

    De grandes tables sont toujours un problème avec les navigateurs. Le rendu d'une grande table, prend beaucoup de temps.
    Par conséquent, il est souvent une bonne idée de diviser une grande table en petites tables.

    En outre, vous voulez probablement spécifier les largeurs de colonne. Sans cela, le navigateur doit télécharger l'ensemble de la table avant de pouvoir calculer la largeur de chaque colonne et de rendre la table. Si vous spécifiez la largeur dans le code HTML, le navigateur ne peut afficher la page alors qu'il est encore le téléchargement. (Remarque: la définition de la largeur de l'ensemble de la table n'est pas suffisant, vous devez spécifier la largeur de chaque colonne.)

    Si vous ajoutez une ligne en un grand tableau à l'aide de Javascript, le navigateur le plus probable est de rendre le ensemble de la table de nouveau. C'est pourquoi il est si lent. Si vous avez des petites tables, seulement une petite table doit être rendu à nouveau. Mieux encore, si vous chargez un sous-tableau à la fois au lieu d'une seule ligne.

    Mais la méthode la plus efficace est de séparer les données en plusieurs pages. Les utilisateurs préférez sans doute que, trop. C'est pourquoi, par exemple, Google n'affiche que si de nombreux résultats sur chaque page.

    OriginalL'auteur PauliL