Gibt es eine Begrenzung der Anzahl der HTML-Elemente, die der Browser ohne Probleme anzeigen kann?

Question

Grundsätzlich habe ich eine riesige Tabelle, die noch größer wird, wenn der Benutzer nach unten scrollt (automatisches Vorladen nachfolgender Zeilen). Irgendwann wird der Browser träge, er beginnt für einen Moment zu hängen, während ich rufe oder versuche zu scrollen und träger wird es, je mehr Zeilen es bekommt. Ich frage mich, ob die Anzahl der Elemente, die diese Seite enthalten kann, begrenzt ist? Oder vielleicht ist es nur mein Javascript, das irgendwohin leckt (obwohl ich nur einen Event-Handler habe, der an den tbody der Tabelle angehängt ist) und ein Skript, das blubbernde Mousedown-Ereignisse analysiert.

Update: Verzögerung wird nach tausend geladenen Zeilen bemerkbar. Die Geschwindigkeit von scroll selbst ist ziemlich erträglich, aber zum Beispiel ist das Hervorheben der angeklickten Zeile (mit Hilfe eines einzelnen Ereignishandlers auf tbody) schmerzhaft (es dauert mindestens 2-3 Sekunden und die Verzögerung wächst mit der Anzahl der Zeilen). Ich beobachte Verzögerungen in allen Browsern. Es ist nicht nur ich, sondern fast jeder, der die Seite besucht, also denke ich, dass es in gewisser Weise jede Plattform betrifft.

aktualisieren: Ich kam hier mit einfachen Beispiel folgenden: http://client.infinity-8.me/table.php?num=1000 (Sie, was Zahl, die Sie wollen num passieren kann), im Grunde macht es eine Tabelle mit num Zeilen und hat einen einzigen Event-Handler ein angebracht Elterntabelle. Ich sollte daraus schließen, dass es tatsächlich keinen merklichen Leistungsabfall gibt, verursacht durch die Anzahl der Kindelemente. Also ist es wahrscheinlich ein Leck woanders :(

Answer 1

Ich glaube nicht, dass es eine durch den Standard definierte Grenze gibt. In jeder Browserimplementierung kann ein Limit fest programmiert sein, obwohl ich mir vorstelle, dass dieses Limit wahrscheinlich Milliarden von Elementen sein wird. Ein anderes Limit ist die Menge an adressierbarem Speicher.

So lösen Sie Ihr Problem: Sie können nicht nur die Elemente beim Scrollen automatisch laden, sondern auch diejenigen, die vom Bildschirm nach oben gerollt sind. Dann bleibt Ihr Programm auch nach langem Scrollen schnell.

Sie können auch eine alternative Schnittstelle wie Paging in Betracht ziehen.

Answer 2

Ich glaube nicht, dass es eine Grenze gibt. Je länger jedoch eine HTML-Datei ist, desto mehr Ressourcen benötigt Ihr Computer. Aber die Tabelle muss sehr groß sein dann ...

Answer 3

Das Limit wird durch den verwendeten User Agent und Client Rechner bestimmt HTML ist, wie auch XML, ein Baumformat von Daten, also je mehr Elemente, desto weiter durch den Baum Client-Browser muss suchen, um die Seite zu rendern.

Ich hatte Probleme beim Hinzufügen von mehr als 100 Tabellen zu einem div (als eine alte Problemumgehung zu IE6 nicht in der Lage, Tabellenelemente dynamisch zu erstellen).

Answer 4

Wenn Sie JS in jeder Tabellenzeile haben, werden alte Computer das nicht behandeln. Für HTML selbst sollte man sich keine Sorgen machen.

Sie sollten sich über die Tatsache sorgen, dass normale Menschen keine großen Tische mögen, dafür ist die Paginierung gedacht. Trennen Sie es mit Paging für eine bessere Benutzerfreundlichkeit oder andere Bedenken.

Denken Sie an Buch, das keine Seiten hat, aber eine große Seite, möchten Sie es lesen? Auch wenn deine Augen (PC in unserem Fall) damit umgehen können.

Answer 5

Welchen Browser benutzen Sie? Einige Browser können die Dinge besser handhaben als andere - zum Beispiel, wenn Sie den IE verwenden, wäre ich nicht überrascht, wenn es träge ist - es behandelt nicht Javascript-Ereignisse sowie Webkit-basierte Browser.

Die andere Sache ist offensichtlich Ihr Computer (RAM und CPU). Aber um ehrlich zu sein, sollten die meisten Computer kein Problem damit haben, es sei denn, wir reden über 10000 Zeilen ... und selbst dann ...

Können Sie etwas Code posten?

Answer 6

Angesichts gibt es eine Vielzahl von Browsern und Rendering-Engines und alle haben unterschiedliche Leistungsmerkmale und auch, dass diese Motoren in Bezug auf Leistung stetig verbessert und Computer-Hardware wird immer schneller: Nein gibt es keine feste Obergrenze Was ein Browser handhaben kann. Es gibt jedoch aktuelle Obergrenzen für bestimmte Hardware für bestimmte Versionen von Browsern.

Wenn Sie nicht mehr definieren, was Ihre Hardware und Browser ist es schwer, Ihnen zu helfen. Außerdem kann niemand einen Hinweis auf die mögliche Leistung Ihres Javascript geben, wenn Sie den Code nicht veröffentlichen. Selbst wenn es sich nur um einen Event-Handler handelt, wenn es unendlich loopt oder wenn es für jedes Element aufgerufen wird, kann es den Rendering-Prozess erheblich verlangsamen.

Answer 7

Keine RAM- oder CPU-Auslastung, wie groß ist die tatsächliche Größe der Datei nach dem Laden?

Wenn Ihre Tabelle wirklich so groß ist, könnten Sie Ihre Benutzer zwingen, Megabytes an Daten zu laden - ich habe festgestellt, dass einige Maschinen nach 2-4 MB Daten hängen bleiben.

Answer 8

Eine andere Sache, die Sie betrachten sollten, ist die Tabellengröße. Wenn Sie Ihre Tabelle mit table-width:auto; formatiert haben, muss der Browser jedes einzelne Element in der Tabelle messen, um es zu bemessen. Das kann wahnsinnig langsam werden.

Wählen Sie stattdessen eine feste Breite oder formatieren Sie die Tabelle mit table-width:fixed.

Answer 9

Hängt davon ab. IE wird beispielsweise erst dann eine Tabelle rendern, wenn der gesamte Inhalt geladen ist. Wenn Sie also eine 5.000 Row-Tabelle haben, müssen Sie alle 5.000 Datenzeilen laden, bevor Sie etwas davon rendern. Andere Browser starten das Rendern, sobald sie teilweise Daten haben, und passen ein wenig (wenn nötig) an, wenn die Tabelle wächst.

Im Allgemeinen verlangsamt Rendering mit der Anzahl der Knoten, sondern auch mit der Komplexität der Knoten ... Vermeiden Sie verschachtelte Tabellen, und wenn möglich, versuchen Sie, riesige Tabellen in Stücke zu zerlegen ... Alle 100 Zeilen (wenn möglich)

Answer 10

Es gibt wirklich keinen Grund auf der Welt, einen ganzen riesigen Datensatz auf einer einzigen Seite zu veröffentlichen. Wenn die Anforderung darin besteht, dem Benutzer alle diese Daten zur Verfügung zu stellen, sollten Sie diese in eine Datei exportieren, die von einer besseren Software als einem Browser gelesen werden kann.

Stattdessen schlage ich vor, dass Sie eine AJAX-gesteuerte Seite erstellen, auf der Sie einen Teil der Daten sehen können. Wenn sie mehr sehen möchten, laden Sie einfach diesen Teil des Datasets herunter und ersetzen das aktuelle Dataset Die Seite. Das ist Paginierung. Die Google-Suche ist ein hervorragendes Beispiel dafür.

Answer 11

Wenn es irgendwelche Grenzen gibt, kommt es auf den Browser an. Aber das Problem Du hast es nicht über Limit, da der Browser die Seite immer noch anzeigt.

Große Tabellen sind immer ein Problem mit Browsern. Das Rendern einer großen Tabelle benötigt viel Zeit. Daher ist es oft eine gute Idee zu teilen Sie eine große Tabelle in kleinere Tabellen.

Ferner möchten Sie wahrscheinlich die Spaltenbreiten angeben.Andernfalls muss der Browser die gesamte Tabelle herunterladen, bevor er die Breite jeder Spalte berechnen und die Tabelle rendern kann. Wenn Sie die Breite im HTML-Code angeben, kann der Browser die Seite anzeigen, während sie noch heruntergeladen wird. (Hinweis: die Breite der ganzen Tabelle ist nicht genug, Sie müssen die Breite jeder Spalte angeben.)

Wenn Sie eine einzelne Zeile in eine große Tabelle mit Javascript hinzufügen, muss der Browser höchstwahrscheinlich die Rendern ganze Tabelle wieder. Deshalb wird es so langsam. Wenn Sie kleinere Tabellen haben, muss nur die eine kleine Tabelle erneut gerendert werden. Besser noch, wenn Sie statt nur einer Zeile jeweils eine Untertabelle laden.

Am effektivsten ist es jedoch, die Daten in mehrere Seiten aufzuteilen. Die Benutzer bevorzugen das wahrscheinlich auch. Aus diesem Grund zeigt Google beispielsweise nur so viele Ergebnisse auf jeder Seite an.