Thema:
Performance verbessert flat
Autor: JPS
Datum:03.02.19 20:50
Antwort auf:Switch - Liste aller eShop-Spiele (Logos+Youtube+MC) von JPS

Nachdem es durch die große Anzahl an Spielen etwas träge wurde, habe ich mir den kompletten Javascript- und CSS-Code nochmal vorgenommen und einige Verbesserungen vorgenommen.

Sämtliche Funktionen sollten jetzt ein wenig schneller laufen und speziell der erste Aufruf der Seite und das Wechseln auf andere Listen, bei dem mehrere dieser Funktionen auf Basis bisheriger Präferenzen automatisch vorgenommen werden, sind jetzt wieder deutlich schneller.

Mehr Optimierungspotential sehe ich leider nicht mehr, da alles mit statischen Websites und Javascript gelöst ist - und da brauchen 1600+ Spiele nun Mal eine gewisse Zeit um entsprechend nach Userwunsch gefiltert und im Browser in der passenden Größe gerendert zu werden.

Evtl. könnte es noch helfen, wenn ich das Rendern im Browser steuern könnte (also während noch Änderungen durch die verschiedenen Filter ablaufen abschalten könnte). Aber dazu habe ich leider keine Lösung gefunden und ich weiß daher auch nicht, ob es wirklich was bringen würde oder im Gegenteil sogar am Stück länger als parallel zu den anderen Änderungen dauern würde.

Sollte ein Javascript/CSS Experte noch weitere Tipps haben, wie man die Filterung einer so großen Menge an Daten spürbar beschleunigen könnte, setze ich diese gerne um. Es soll aber weiterhin alles clientseitig ablaufen, da mir das aus Sicherheits- und Datenschutzgründen lieber ist.

Falls jemand Interesse hat hier noch die Details:

- Die Links nach Extern werden jetzt erst beim Mouseover erzeugt, dadurch enthält der anfangs geladene HTML Code ca. 8000 weniger Links, was neben dem Laden auch den Browser entlastet. Kleiner Nachteil: Javascript muss aktiviert sein - aber ohne Javascript sind ohnehin auch viele der anderen Funktionen nicht nutzbar.

- Filter nutzen jetzt nicht mehr das "class"-Attribut, sondern getrennte Daten-Attribute, wodurch ich beim Anwenden von Filtern auf zeitaufwendigere "Replace"-Funktionen verzichten kann.

- Da das "class"-Attribut jetzt nur noch die Covergröße enthält, kann ich diese ebenfalls jeweils direkt reinschreiben ohne hierfür auf "Replace" zurückgreifen zu müssen.

- Der Code für das Wiederherstellen der bisherigen Präferenzen enthält jetzt nur noch die tatsächlich nötigen Aktionen - vorher habe ich einfach die manuellen Funktionen (also Buttons und Auswahllisten) aufgerufen, was aber einige Punkte unnötigerweise doppelt ausgeführt hat.

- Die Suchfunktion startet erst ab dem zweiten eingegebenen Zeichen und arbeitet ein wenig anders als vorher, wodurch die Eingabe weniger träge wirkt.

- Altlasten aus Javascript und CSS entfernt - dürfte nicht viel Unterschied machen, aber hat sich angeboten das auch zu erledigen.


< antworten >