Wie viele HTML-Elemente können mit "modernen" Browsern "Griff" auf einmal?
"modern", weil diese definition mit der Zeit ändern kann (und speziell ich meine desktop-Browser)
"behandeln", denn das kann je nach Maschinenkonfiguration/memory, aber speziell meine ich einen Allgemeinen Anwendungsfall.
Diese Frage in den Sinn kam, über ein bestimmtes problem, das ich zu lösen versuche mit großen Datenmengen.
Im wesentlichen, Wann immer eine änderung an einem bestimmten Datensatz, bekomme ich die vollen Datenbestand zurück und ich habe zum Rendern dieser Daten im browser.
Also zum Beispiel über eine websocket-ich bekomme eine push-Veranstaltung, die mir sagt, ein dataset-änderungen hat, und dann habe ich zum Rendern dieser Datensatz in HTML durch kopieren von einer vorhandenen DOM-element zu duplizieren, das Auffüllen der Elemente mit den Daten aus diesem Satz unter Verwendung der Klassennamen oder anderen element-IDS, und fügen Sie es anschließend zurück zum DOM.
Beachten Sie, dass jedes Objekt (JSON) in diesem Datensatz können so viele wie 1000+ Kind-Objekte, und kann es sein, so viele wie 10,000+ übergeordnete Objekte, so wie Sie sehen können gibt es vielleicht ein Beispiel, wo das zurückgegebene dataset ist nach oben in Richtung 1,000,000 => 10,000,000 Daten Punkte oder mehr.
Nun der lustige Teil kommt, wenn ich zum Rendern dieses Zeug. Für jeden Datenpunkt kann es 3 oder 4 tags zum Rendern und Stil die Daten, und es können Ereignis-Listener für diese tags (vielleicht auf den übergeordneten container zu erleichtern, die Dinge mit delegation).
Alles in allem, kann es eine Menge von eingehenden Informationen, die benötigt, um gerendert werden und ich versuche, herauszufinden, der beste Weg, um dieses Szenario zu behandeln.
Idealerweise würden Sie wollen einfach nur, um zu machen die änderungen für die einzelnen Daten zeigen, dass die änderungen eher als re-rendering das ganze set, aber das kann nicht sein, eine option durch wie das backend entwickelt wurde.
Meine größte Sorge hier ist, zu verstehen, die Einschränkungen der browser/DOM und mit Blick auf dieses problem durch die Linse des frontend. Es gibt einige Veränderungen, die eintreten sollte, die auf das backend sicher (Daten-design, caching, Paginierung), aber das ist nicht der Fokus hier.
Dies ist nicht eine typische Verwendung für HTML - /DOM, wie ich weiß, gibt es Einschränkungen, aber was ist das genau? Sind wir immer noch gedeckelt bei etwa 3000-4000 Elemente?
Habe ich eine Reihe von Verwandte Unterfragen für das, was ich bin aktiv suchen bis aber ich dachte, es wäre schön, zu teilen einige Gedanken mit dem rest der stackoverflow-community und versuchen zu bündeln einige Informationen zusammen über dieses Thema.
Was ist "angemessener" Betrag von DOM-Elementen, die einen modernen browser verarbeiten kann, bevor es beginnt zu langsam/nicht zu reagieren?
Wie kann ich benchmark die Anzahl der DOM-Elemente in einem browser umgehen kann?
Was sind einige Strategien für den Umgang mit großen Datenmengen, die gerendert werden müssen (neben der Paginierung)?
Sind templating frameworks wie Schnurrbart und LENKER mehr Performance für das rendering von html-Code aus Daten/json (am frontend) als mit jQuery oder Reguläre Ausdrücke?
- Es gibt auch "moderne" Browser in großen, Fetten desktop-Rechnern und "modernen" Browser in günstigen smartphones. Client-system Kapazität ist dein limitierender Faktor.
- genau mein Punkt, das ist der Grund, warum ich es in Anführungszeichen, aber ich sollte klar sein, das ist für desktop-Browser
- Wenn die Datensätze nach oben zu 10,000,000 Punkte sollten Sie überdenken das Konzept und die Ausgabe nur kleine Teile davon in einer Zeit, als kein Nutzer möchte waten durch 10 Millionen Elementen auf der gleichen Seite, oder so würde ich denken, mindestens ?
- Nun, es gibt desktop-Rechnern mit 1 GB Speicher und desktop-Rechnern mit 16GB. Was ist Ihre eigentliche Benutzer-Publikum? Hast du irgendwelche Kontrolle über Sie? Sind Sie sicher, Sie können nur entlassen tablet - /Handy-Nutzer, die für mehr und mehr Gesamt-Internet-Verkehr, die ganze Zeit?
- Darüber hinaus ist der Aspekt des DOM ist, dass für die gleichen Elemente, die wiederverwendet werden können, nehmen Sie HTML5-Canvas zum Beispiel. Der DOM sollte dynamisch bleiben und "Objekte" bleiben sollte, in einem datenspeicher gespeichert, bis Sie benötigt. Sie wird eher begrenzt sein durch schlechten code und Speicher-Lecks vor erreichen irgendeine Art von entscheidenden Masse des Elements im browser.
- Ich tun, anzuerkennen, dass es ein problem mit der Art und Weise der Daten entwickelt wurde, aber das ist nicht das Problem per se. Es gibt eine Menge von backend-Strategien für dies, aber ich möchte den Fokus auf frontend-Lösungen/Einschränkungen.
- Ich bin mehr so konzentriert auf den Versuch, zu verstehen, die Beschränkungen der frontend/client mit dem DOM nicht wirklich versucht, das problem zu lösen, es ist einfach zu illustrieren.
- Ich weiß, Sie ausdrücklich ausgeschlossen Paginierung, aber ich fühle mich gezwungen, darauf hinweisen, dass dieses Muster ist ziemlich weit gereist. Having said, die, und bestätigt, dass alle Antworten spekulativ sein/verschwommen, meine Erfahrung ist, dass die meisten desktop-Browser beginnen zu handeln träge/misstrauisch, wenn die Liste/Bericht/Warenkorb/etc hat, vielleicht 10-20k html-Elemente, (und dann kommt Paginierung). Offensichtlich mehr Speicher und CPU liefern bessere Laufleistung, aber die Schuppe in die Millionen scheinen deutlich unpraktisch.
- Leinwand benutzerdefinierte rendering, wenn Sie müssen Milliarden von Elementen. die Leinwand ist der einzige Weg, weil die "modernen" Browsern sind beschissen.
- Rendering ein problem sein wird ( langsam ) aber immer, dass chunk von Daten an Ihren browser ohne Verzögerungen ist eine weitere Herausforderung. Ich würde mein design überdenken.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das ist eine Frage, die nur statistisch versierte Antwort könnte sein, präzise und umfassend.
Warum
Der entsprechenden Gleichung, wobei N die Anzahl der Knoten, bytesN ist die Gesamtanzahl der bytes benötigt, um Sie in der DOM-Knoten-index-Reihe ist
n ∈ [0, N)
, bytesOverhead ist die Menge des verwendeten Speichers für einen Knoten mit absoluter minimum-Attribut Konfiguration und kein innerHTML, und bytesContent ist die Menge des verwendeten Speichers zu füllen, so eine minimale Knoten.Den angeforderten Wert in der Frage ist der maximale Wert von N im worst-case-handheld-Gerät, Betriebssystem, browser -, und Betriebssystem-Bedingungen. Die Lösung für N für jede permutation ist nicht trivial. Die obige Gleichung zeigt drei Abhängigkeiten, von denen jeder könnte drastisch verändern die Antwort.
Abhängigkeiten
Die Strenge Lösung
Könnte man die tests ausführen, um festzustellen, (1) und (2) für jedes der gemeinsamen http-user-agents verwendet, die auf handheld-Geräten. Die Verteilung des user agents für jede Seite kann erhalten werden, indem die Konfiguration der logging-Mechanismus des web-Servers zu platzieren, der HTTP_USER_AGENT, wenn er nicht da ist standardmäßig aktiviert, und dann die Strippen alle, aber das Feld in der log und das zählen der Instanzen der einzelnen Werte.
Die Anzahl der bytes pro Zeichen würde müssen getestet werden, für die beide Attribute-Werte und UTF-8 text (oder was auch immer der Kodierung), um eine deutliche paar Faktoren für die Berechnung (1).
Den verfügbaren Arbeitsspeicher, würde geprüft werden müssen, auch unter einer Vielzahl von gemeinsamen Bedingungen, das wäre ein großes Forschungsprojekt von selbst.
Dem bestimmten Wert von N gewählt haben würde, zu NULL zu behandeln, die tatsächlichen schlimmsten Fall, so würde man wählte einen bestimmten Prozentsatz von typischen Fällen von content, node-Strukturen, - und Laufzeit-Bedingungen. Zum Beispiel, man kann auch eine Probe von Fällen mit irgendeiner form von randomisierten in-situ - (innerhalb der normalen Umwelt-Bedingungen) studieren und suchen von N erfüllt, dass 95% dieser Fälle.
Vielleicht eine Reihe von Fällen geprüft werden konnte in der oben genannten Möglichkeiten und die Ergebnisse in einer Tabelle angeordnet. Würde damit eine direkte Antwort auf Ihre Frage.
Ich vermute, es würde eine gut ausgebildete, mobile software engineer mit Flair für Mathematik, insbesondere Statistik, fünf Vollzeit-Wochen, um vernünftige Ergebnisse.
Eine Praktische Einschätzung
Könnte man denke, das worst-case-Szenario. Mit ein paar volle Tage der Forschung und ein paar proof-of-concept apps, dieser Vorschlag könnte verfeinert werden. Fehlt die Zeit, das zu tun, hier ist eine gute erste Vermutung.
Erwägen, ein Handy, erlaubt 1 Gbyte für den DOM, da der normale Betriebsbedingungen die Verwendung von 3 GByte von den 4 GByte für die oben genannten Zwecke. Man könnte vermuten, der Durchschnittliche Verbrauch von Speicherplatz für einen Knoten Sie wie folgt vor, um eine ballpark-Figur.
In diesem Fall Nworst_case, im schlimmsten Fall max-Knoten,
Ich würde nicht, jedoch, bauen Sie ein Dokument in einem browser mit drei Millionen DOM-Knoten, wenn es sein könnte, überhaupt vermieden. Betrachten beschäftigen, die mehr gängige Praxis unter.
Gängige Praxis
Die beste Lösung ist, um zu bleiben weit unter dem, was Nworst_case werden könnte, und reduzieren Sie einfach die Gesamtzahl der Knoten der Grad möglich mit standard-HTTP-design-Techniken.
Ihre Antwort: 1 ODER Millionen. Ich werde kopieren/einfügen eine Antwort aus einer ähnlichen Frage auf SO.
Finden Sie unter: wie viele div ' s können Sie vor dem dom verlangsamt und instabil wird?
Dies ist wirklich eine unbeantwortbare Frage, zu viele Faktoren bei zu vielen Winkeln. Ich werde sagen, dieser jedoch in eine einzelne Seite zu laden, habe ich eine javascript setinterval auf 1ms um laufend neue hinzu divs auf einer Seite mit der ID Inkrementieren um 1. Mein Chrome browser nur übergeben 20.000, und ist mit 600 MB Ram.