React JS: Zustand von Grid-Feldern

[Rolf B]

Hallo Bohomo,

500 × 500 = 250000. So viele Elemente sind der Tod des DOM. Denke ich. Was ist eine Zelle? Wie groß sind die Zellen? Was kommt hinein? Ein Bildchen? Sind ständig alle Zellen sichtbar oder scrollst Du drüber und siehst immer nur - sagenwirmal - 20×20 Zellen?

Ein 500×500 Raster solltest Du nicht vollständig mit HTML Zellen darstellen, sondern irgendwie prüfen, welchen Ausschnitt du auf dem Bildschirm hast, und den mit Canvas zeichnen.

Falls Du an 3D Effekte denkst, dann denk auch an die Möglichkeit von WebGL für eine anständige Grafikkarten-Unterstützung. Aber Vorsicht: das ist eine steile, vergletscherte Lernkurve.

Update: Ich hab mal eine Schleife gemacht, die 500x500 divs erzeugt und in ein Grid mit einem repeat(500, 1px) Spaltentemplate gesetzt. Das Erzeugen der 500 Divs dauerte 2s. Danach vergingen nochmal 3s, bis der Browser das gezeichnet hatte…

Update 2: Dieses Browser-Tab fraß 400MB Speicher!

Rolf