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.

InformationsquelleAutor qodeninja | 2014-02-06
Schreibe einen Kommentar