Suchfunktion auf Homepage

[Rolf B]

Hallo Martin,

Man gewinnt also auf der technischen Seite nichts.

kömmt drauf an. Ich hab mir gerade eine HTML Seite mit einer Table aus 14000 Rows zu je 10 Spalten gemacht. Wenn ich die lade, gönnt sich Chrome ca 10 Sekunden, bis das Warterädchen nicht mehr dreht. Man sieht zwar sofort was, aber der Ladevorgang ist längst nicht fertig.

Wenn ich die meisten Zeilen ausblende und nur mittels td:nth-child(...) ein ca 20 sichtbar mache, ist er unter einer Sekunde fertig. Es kostet immer noch Zeit, das alles zu durchlaufen, aber jetzt ist es handhabbar.

Der Browser gönnt sich eine Menge Zeit beim Parsen und Darstellen einer Tabelle mit drölftausend Zeilen. Wenn man initial alle Rows ausblendet und mittels Filter nur die einblendet (bspw. über eine Klasse "matches-filter" am tr-Element), die auf die Suchbedingung zutreffen, spart man die Rendering-Zeit. Die Seite ist dann in 0,6s fertig, und eine Schleife, die 50 zufällige Rows einblendet, braucht 20ms.

Man könnte die Daten auch als Array of Array (nicht JSON, das hat zu viel Overhead) rüberschieben statt mit HTML Dekoration. Das spart eine Menge Volumen. Aber dann muss man die Tabellenzellen basierend auf dem Suchergebnis generieren - auch nicht ganz trivial.

Aber bevor wir hier über Optionen weiter debattieren, würde ich von Gerhard gern wissen: Mit welchem Know-How bezüglich der Magic Five des Web (HTML, CSS, JavaScript, Server-Programmiersprache und SQL) bist Du hier am Start?

Rolf