Sortieren und Anzeigen

T

Tommy57

Erfahrenes Mitglied
Hallo,

ich hänge gerade an einem Performance Problem.

Ich übergebe ein JSON Objekt an JavaScript, wo ich den Rechner 10.000 Zeilen sortieren lasse. Die Sortierung dauert nur wenige Millisekunden. Bei der Ausgabe sieht das leider anders aus. Diese dauert teilweise mehrere Sekunden und lässt eventuell den Browser abstürzen.

Meine Frage ist jetzt, wer weiß, wie man diesen Vorgang optimieren kann?

Aktuell durchlaufe ich das sortierte Array in einer for-Schleife und erzeuge eine Variable mit formatiertem HTML-Code (eine Zeile entspricht einem Div) und dann mit einem innerHTML gebe ich den kompletten Code aus.

Hat jemand eine bessere Idee? Wäre super, wenn ich so mit bis zu 50.000 Zeilen arbeiten könnte.

Gruß, Tommy
 
Ohne den Code zu kennen ist es schwer dir bei der Optimierung zu helfen.

Aber vermutlich wird man da gar nicht so viel machen können wenn es einfach daran liegt das so viele Daten angezeigt werden müssen.

Ist es denn unbedingt erforderlich das die 10.000 Zeilen auf einmal angzeigt werden. Kann man das nicht in einzelne Blöcke a´1.000 Zeilen aufteilen!?
 
Hallo tombe,

also ich habe auch schon probiert, die Zeilen in kleineren Blöcken auszugeben, das ist sogar noch langsamer.

Ich glaube, das würde nicht viel bringen, den Code hier zu posten. Hab den mal online gestellt.

http://it-royal.eu/


Man kann über die URL die Zeilen- und Spalten-Anzahl verändern. Hier ein Beispiel: :D
http://it-royal.eu/?zeilen=10000&spalten=10

Gruß, Tommy


EDIT: Ich habe den Code so geschrieben, dass das Script immer nur maximal 5.000 Zeilen auf einmal ausgibt. Das merkwürdige daran ist, dass je mehr Blöcke er ausgibt, um so länger dauert jeder einzelne Block.
Das heißt: 10 x 500er Blöcke, dauern länger als 2 x 5.000 und er wird von Block zu Block immer langsamer. Ich dachte, vielleicht ist da irgendwo ein Denkfehler in der index.php ganz unten beim setTimeout.
 
Zuletzt bearbeitet:
Ohne es getestet zu haben würde es meiner Meinung nach schon mal viel bringen, wenn du das gesamte inline-css entfernst und stattdessen Klassen verwendest.

1. Wird dadurch der zu parsende String wesentlich länger und
2. Muss der Browser für jedes Element die Eigenschaft einzeln auswerten anstatt für alle die gleiche Klasse benutzen zu können.

Und ich glaube du hast den Vorschlag von tombe falsch verstanden. Du sollst nicht 2x5000 anstatt 1x10000 Zeilen ausgeben, sondern nur 1x5000 und die anderen z.B. erst auf Wunsch des Besuchers "Mehr Zeilen anzeigen" o.ä.
 
Hallo CPoly,

du hast recht, wenn ich das inline CSS entferne, ist es schon deutlich schneller. Und die Idee "auf Wunsch" mehr anzuzeigen ist auch gut. Ich kann dann Seitenwechsel Buttons anbieten und die Anzeige auf 500 reduzieren. Sortieren tut er sie ja trotzdem alle. Das ist genial! ^^

Gibt es sonst noch irgendwelche Optimierungstricks. Also meine Idee war, die Werte später beim Erzeugen der Tabelle richtig zu formatieren. Sprich, wenn es eine Prozentzahl ist, soll sie eventuell umgefärbt werden und so.

Ist es okay das auf dem Client zu machen, oder würde man das schon Serverseitig lösen.
Und ist es okay, wenn ich Divs verwende oder ist es besser Tables zu verwenden?

Hat da jemand Erfahrung, vor Allem in dem Punkt Performance, weil ich soll später riesige Tabellen darstellen und das wäre cool, wenn das später auch auf schwächeren Systemen gut läuft.

Gruß, Tommy
 
Ich würde es auf dem Client machen. Hängt aber auch davon ab, was genau du mit "formatieren" alles meinst. Das langsame wird vermutlich immer das Parsen und Rendern des HTML sein und nicht deine Vorarbeit (sortieren, berechnen etc.)

Ich habe es nicht getestet, kann mir aber vorstellen, dass Tabellen schneller sind, da sie für so was gedacht sind. Ich finde hier sind Tabellen absolut angebracht.
 
Hi,

also mit Formatieren meine ich, dass ich zu jedem Wert im Array Metadaten mitspeichern möchte, damit ich später bei der Ausgabe weiß, das ist ein Preis, das eine Prozentzahl und das wiederrum nur ein Link usw und die werden dann unterschiedlich formatiert, sprich Farbe, Textausrichtung usw. Vorher hab ich den Server diese Werte formatieren lassen und hatte dadurch Probleme beim Sortieren, wegen der ganzen Tags. Nun will ich alles auf den Client auslagern und Javascript-Funktionen schreiben, die mir alles korrekt umstylen.

Wegen Tables und Divs; Ich werde beides einfach mal testen. Hab ja die Testseite dafür gebaut. Ich denke nur, dass ich mit Div's mehr Möglkichkeiten habe und auch weniger Probleme. Der IE ist das gerne mal störrisch^^
 
Mal eine generelle Frage.
Meinst du nicht es wäre besser wenn du die Angaben in eine Datenbank auslagerst als sie alle in ein riesiges Array und direkt in die Seite zu packen!?

Keine Ahnung was das für Daten sind aber wenn du jetzt auch noch für jeden Wert eine "Beschreibung" angeben willst/musst, wie willst du da jemals etwas anpassen wenn es erforderlich wird?
 
Hi tombe,

bei diesen Daten geht es um vom User eingetragene Daten durch CSV-Dateien zum Beispiel. Normale User sollen maximal 500 Zeilen ausgegeben bekommen. Geplant ist, dass sich Premium-User 5.000 Zeilen anzeigen lassen können und Admins 50.000 Zeilen. Ich werde es so bauen, wie du vorgeschlagen hast, dass der User lediglich 50 Zeilen zu sehen bekommt und über Seitewechsel Buttons die Elemente verändern kann. Diese sollen zusätzlich vom User sortiert und gefiltert werden können. Diese JavaScript Lösung ist schneller als wenn ich die Daten per AJAX nachladen würde und das Formatieren mit Hilfe von JavaScript beschleunigt auf der anderen Seite noch den Sortiervorgang erheblich.

Gruß, Tommy
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück