Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Optimierungsvorschläge für Big-Data-Widget (Eigenentwicklung)

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Optimierungsvorschläge für Big-Data-Widget (Eigenentwicklung)

    Hallo zusammen,

    ich arbeite gerade an einem Big-Data-Widget, welches eine Scrollbare Liste inkl. Suche für sehr große Datenmengen clientseitig (!) ermöglichen soll.

    Editierlink: http://jsbin.com/figisere/3/edit (funktioniert unter Umständen nicht richtig)
    Ansichtslink: http://jsbin.com/figisere/3 (hier funktioniert das Widget)

    Dazu werden die Daten in einem Array mit JavaScript-Objekten vorgehalten (Ajax soll später optional dazu kommen). Bei der Anzeige werden immer nur die Daten angezeigt, die sich gerade im sichtbaren Bereich befinden sollten.

    Zum Filtern der Liste verwende ich aktuell $.grep, welches bis zu 500000 Datensätzen noch recht brauchbar funktioniert. 1 Millionen und mehr sind etwas langsam, eventuell werde ich hier noch einen Segmentierungsalgorithmus implementieren.

    Um größere Datenmengen zu testen, muss man einfach die Variable "maxEntries" hochsetzen. Keine Angst vor großen Zahlen, bis 500000 sollte kein Problem sein.
    Code:
    var unselectedEntries = [];
    
    var maxEntries = 200;
    
    for (var i = 0; i < maxEntries; i++) {
    Folgende Probleme treten im Moment noch auf und ich wäre dankbar für Verbesserungsvorschläge diesbezüglich:
    • Das Scrollen nach unten geschieht sehr schnell, während das scrollen nach oben etwas hakelig ist. Weiß jemand, woran das liegen könnte?
    • Die Scrollbar flackert manchmal merklich, da sie bei größeren Datenmengen in der Mitte fixiert wird. Die tatsächliche Höhe der Scrollbar ist schwer darstellbar, da immer nur ein Ausschnitt gerendert wird. Weiß jemand, wie man die tatsächliche Höhe der Scrollbar simulieren könnte?
    • Gibt es weitere Verbesserungsvorschläge, die die Struktur oder die Verarbeitung der Daten betreffen?
    Tutorials zum Thema Technik:
    https://pilabor.com
    https://www.fynder.de

  • #2
    Hallöchen,

    Zitat von Andreas Beitrag anzeigen
    - Die Scrollbar flackert manchmal merklich, da sie bei größeren Datenmengen in der Mitte fixiert wird. Die tatsächliche Höhe der Scrollbar ist schwer darstellbar, da immer nur ein Ausschnitt gerendert wird. Weiß jemand, wie man die tatsächliche Höhe der Scrollbar simulieren könnte?
    - Gibt es weitere Verbesserungsvorschläge, die die Struktur oder die Verarbeitung der Daten betreffen?
    Da frage ich mich in erster Linie, wozu der Nutzer eine Auswahl mit so vielen Datensätzen überhaupt braucht? Vielleicht verlierst du mal ein paar Worte zum konkreten Anwendungsfall, sonst wird es mit den Vorschlägen schwierig.

    Viele Grüße,
    lotti
    [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

    Kommentar


    • #3
      Es geht um ein System mit einer großen Anzahl an Benutzern und Rollen (> 50000). Diese sollen in Echtzeit rudimentär durchsucht und gescrollt werden können, ohne den Server zu sehr zu belasten. Leider kann ich Ansätze mit Emberjs oder ähnliches nicht ohne großen Aufwand verwenden, da es sich um eine vorhandene Applikation mit vorhandenen Widgets handelt, die angepasst werden müssen.

      jQuery ist die einzige lib, die ich unkompliziert einsetzen kann.

      Tatsache ist: Es soll tatsächlich mit solch großen Datenmengen in Echtzeit gearbeitet werden. Vorfiltern ist leider aufgrund der Anforderungen nicht möglich. Vorsegmentieren (z.B. nach Anfangsbuchstabe) vorerst auch nicht, da tatsächlich alle Daten gescrollt werden können sollen.

      Flaschenhals ist definitiv das Rendering im Browser. Wenn man eine Liste mit 500000 Datensätzen rendert und diese scrollt, legt der Browser sich schlafen. Wenn man alles in ein JS-Array packt und nur die 20 Datensätze rendert, die je nach Scrollstatus sichtbar sind, dann geht's sogar recht fix.

      Aber die Performance ist auch nicht das Problem, mein Ansatz funktioniert sehr gut. Nur die "Kinderkrankheiten" muss ich noch ausmerzen.
      Tutorials zum Thema Technik:
      https://pilabor.com
      https://www.fynder.de

      Kommentar


      • #4
        Hallöchen,

        ist Pagination auch keine Lösung? Ich stelle mir das "erscrollen" des 300.000sten Eintrag ein wenig unhandlich vor.

        Viele Grüße,
        lotti
        [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

        Kommentar


        • #5
          ist Pagination auch keine Lösung? Ich stelle mir das "erscrollen" des 300.000sten Eintrag ein wenig unhandlich vor.
          Im Notfall ja, aber auch das wäre mit einer Anzahl von 100000 sehr problematisch darzustellen. Pagination ist generell sehr unhandlich bei der Menge Daten.

          Wie gesagt: Die Lösung funktioniert, muss nur noch optimiert werden.
          Tutorials zum Thema Technik:
          https://pilabor.com
          https://www.fynder.de

          Kommentar


          • #6
            Hä? Du suchst wohl sowas: http://ivaynberg.github.io/select2/#ajax
            Bei der Eingabe wird ein AJAX Request gemacht und die entsprechenden Datenentsprechend der Eingabe geladen. Sollte auch bei sehr großen Datenmengen funktionieren.

            Kommentar


            • #7
              Hä? Du suchst wohl sowas: http://ivaynberg.github.io/select2/#ajax
              Danke, aber leider nein. Select2 kenne ich. Die meisten libs zum Thema, die ich über cdnjs.com einbinden kann, habe ich mir schon angeschaut.

              Eher sowas hier:
              http://www.senamion.com/blog/jmultiselect2side.html
              http://www.stevefenton.co.uk/cmsfile...ltiselect.html
              http://quasipartikel.at/multiselect/
              http://crlcu.github.io/multiselect/

              Es also geht nicht um das Nachladen der Daten per Ajax, sondern um die Darstellung und Verwaltung der Daten. Select2 kann man nicht ohne Klimmzüge in einer durchsuchbaren Liste darstellen.

              Die Ansätze oben sind aber 1. alle nicht big data fähig (versucht da mal 50000 Datensätze zu rendern) und 2. zu unflexibel. Ich suche kein "Select-Element", was viel kann, sondern möchte das quasi für beliebige Daten nutzen können (z.B. für Zeilen einer Tabelle mit Formularbezug).

              Meine Fragen sind also leider noch offen:
              • Das Scrollen nach unten geschieht sehr schnell, während das scrollen nach oben etwas hakelig ist. Weiß jemand, woran das liegen könnte?
              • Die Scrollbar flackert manchmal merklich, da sie bei größeren Datenmengen in der Mitte fixiert wird. Die tatsächliche Höhe der Scrollbar ist schwer darstellbar, da immer nur ein Ausschnitt gerendert wird. Weiß jemand, wie man die tatsächliche Höhe der Scrollbar simulieren könnte?
              • Gibt es weitere Verbesserungsvorschläge, die die Struktur oder die Verarbeitung der Daten betreffen?
              Tutorials zum Thema Technik:
              https://pilabor.com
              https://www.fynder.de

              Kommentar


              • #8
                Die Scrollbar flackert manchmal merklich, da sie bei größeren Datenmengen in der Mitte fixiert wird. Die tatsächliche Höhe der Scrollbar ist schwer darstellbar, da immer nur ein Ausschnitt gerendert wird. Weiß jemand, wie man die tatsächliche Höhe der Scrollbar simulieren könnte?
                Die Scrollbar steckt bei mir einfach nur in der Mitte. Das nennst Du funktionieren? Und, was soll man da groß simulieren? Bei langen Listen wären ja Bewegungen im Subpixelbereich nötig. Ich finde/fände so eine Steuerung eine Zumutung. Da ist mit Pagination, meinetwegen mit 1000 Punkten lieber. Die kann man auch logarithmisch oder mit Eingabe anlegen.
                [COLOR="#F5F5FF"]--[/COLOR]
                [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                [COLOR="#F5F5FF"]
                --[/COLOR]

                Kommentar


                • #9
                  Zur Datenstuktur: Hier könnte ein binary tree sinnvoll sein, wenn deine Ergebnismenge durchsuchbar sein soll. John Resig hatte dazu 2011 eine tolle Artikelserie verfasst, siehe http://ejohn.org/blog/javascript-tri...ance-analysis/ . Eine compressed Trie-Implementierung gibts auf https://github.com/mckoss/lookups

                  Ich würde die Scrollbar komplett weglassen und den Besucher über Pfeile navigieren lassen (bspw. +-1, +-5, jump to start/end). Dabei immer ein paar Anzeigen mehr vorrendern, damit die nächsten Seiten schnell erreichbar sind. Beim Klick auf +1 bspw. könntest du dann direkt einblenden und gleich die übernächste Ansicht im Hintergrund rendern.

                  Wenn du dich noch ein wenig inspirieren lassen willst, lohnt sich ein Blick auf Ext.ux.Livegrid. Lädt im Unterschied zu deiner Implementierung permanent nach, kann sehr gut mit großen Datenmengen umgehen. Hier noch ein Link aus meinen Bookmarks: http://fusiongrokker.com/post/jqmobi...nite-scrolling - auch permanent am nachladen.

                  Etwas modernerer Ansatz: Per Websocket (fallback flash) ließe sich eine permanente Verbindung zum Server aufbauen und der ajax-Overhead fiele raus. Auf dem Client könntest du dann nur eine sehr kleine Teilmenge der Datensätze vorhalten und permanent nachladen. Durchsuchen müsstest du dann auf dem server, jedoch ist die Applikation deutlich schneller verfügbar.

                  Viele Grüße


                  Basti
                  I like cooking my family and my pets.
                  Use commas. Don't be a psycho.
                  [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                  Kommentar


                  • #10
                    @rudygotya: Vielen Dank für die tollen Ansätze. Insbesondere das Extjs-Beispiel hatte ich mal gesehen, aber in Ermangelung der Kenntnis des Frameworknamens nicht mehr gefunden.
                    Tutorials zum Thema Technik:
                    https://pilabor.com
                    https://www.fynder.de

                    Kommentar

                    Lädt...
                    X