Große Datei in html einbinden -> trotzdem schnell laden!

[florianluedtke]

Hallo,

ich war lange Zeit nur passiv tätig, aber jetzt habe ich mich doch mal getraut mich anzumelden ;)
Ich muss für die Uni ein WMS (web mapping system) per leaflet/javascript erstellen und habe jetzt eine GeoJSON-Datei mit einer Größe von 8 MB über Ajax eingebunden...klar 8MB hören sich für mich nicht viel an, aber die Website braucht doch schon ein paar Sekunden bis sie vollständig geladen ist. Außerdem müssen die Pfade der GeoJSON-Datei bei jedem Zoom-Vorgang wieder neugeladen werden, das heißt, dass es wirklich nicht mehr flüssig läuft.
Gibt es eine Idee, wie man das Ganze simpel lösen kann? Die Seite wird über bplaced gehostet.
Danke schon mal im Voraus und es tut mir Leid, wenn ich wichtige Infos vergessen habe. Ihr werdet es mir dann ja schon sagen

 

[scbawik]

Hallo,

ich war lange Zeit nur passiv tätig, aber jetzt habe ich mich doch mal getraut mich anzumelden ;)
Ich muss für die Uni ein WMS (web mapping system) per leaflet/javascript erstellen und habe jetzt eine GeoJSON-Datei mit einer Größe von 8 MB über Ajax eingebunden...klar 8MB hören sich für mich nicht viel an, aber die Website braucht doch schon ein paar Sekunden bis sie vollständig geladen ist.

Wenn du die 8MB an Daten auf einmal benötigst, führt schon mal kein Weg daran vorbei, diese auch auf einmal zu laden. gzip-Kompression würde die Datenmenge hier noch ein Stück weit optimieren. Ein Free-Hoster wie bplaced wird das aber vermutlich nicht anbieten.

Eine weitere Optimierung wäre, auf JSON zu verzichten und stattdessen die Daten gleich als Javascript auszuliefern.
Dann fällt das Parsen weg und die Object-Properties könnte man ohne Anführungszeichen schreiben ("), was bei vielen Daten auch einen minimalen Vorteil bzgl. Datenmenge bringen könnte.

Grundsätzlich ist es aber schon mal konzeptionell nicht gut, so viele Daten auf einmal einzubinden und darzustellen.

Außerdem müssen die Pfade der GeoJSON-Datei bei jedem Zoom-Vorgang wieder neugeladen werden, das heißt, dass es wirklich nicht mehr flüssig läuft.

Ich denke du meinst nicht neu geladen, sondern neu gerendert?
Hier könnte folgendes Abhilfe schaffen:
https://github.com/Leaflet/Leaflet.markercluster

 

[florianluedtke]

Wenn du die 8MB an Daten auf einmal benötigst, führt schon mal kein Weg daran vorbei, diese auch auf einmal zu laden. gzip-Kompression würde die Datenmenge hier noch ein Stück weit optimieren. Ein Free-Hoster wie bplaced wird das aber vermutlich nicht anbieten.

Eine weitere Optimierung wäre, auf JSON zu verzichten und stattdessen die Daten gleich als Javascript auszuliefern.
Dann fällt das Parsen weg und die Object-Properties könnte man ohne Anführungszeichen schreiben ("), was bei vielen Daten auch einen minimalen Vorteil bzgl. Datenmenge bringen könnte.

Grundsätzlich ist es aber schon mal konzeptionell nicht gut, so viele Daten auf einmal einzubinden und darzustellen.



Ich denke du meinst nicht neu geladen, sondern neu gerendert?
Hier könnte folgendes Abhilfe schaffen:
https://github.com/Leaflet/Leaflet.markercluster

 

[florianluedtke]

Ergibt das einbinden über JS einen Sinn bei über 350.000 Koordinaten? Ich habe keine Erfahrungswerte, was das angeht.
Aber danke für die Antwort, das ging ja doch recht fix ;)

 

[Tronjer]

Eine weitere Optimierung wäre, auf JSON zu verzichten und stattdessen die Daten gleich als Javascript auszuliefern.

Quatsch. Wie willst du Daten ohne Datenformat laden? JSON ist schon richtig.

Nicht alle Daten auf einmal laden, sondern nur diejenigen, die initial benötigt werden, und beim Zoomen in der Map einen HTTP-Request senden, der die Daten des entsprechenden Clusters nachlädt. Ich habe so etwas noch nicht gemacht, bin mir aber sicher, dass es dafür APIs gibt.

 

[scbawik]

Quatsch. Wie willst du Daten ohne Datenformat laden? JSON ist schon richtig.

<script src="data.js"></script>

Aber wenn der Profi meint es wäre schneller eine separate AJAX-Request zu starten und anschließend umzuwandeln, dann wird es wohl stimmen ;)
Ich wollte jedoch eigentlich gerade schreiben dass dies nur eine Microoptimierung des aktuell falsch konzipierten Aufbaus ist, und den Aufwand nicht Wert ist.

 

[NetAktiv]

Ist es denn wirklich erforderlich, die Daten zur Anzeige zu laden (das entspricht ja weit mehr als 2000 Schreibmaschinenseiten), oder dienen die einer Berechnung. Dann könnte man ja eventuell die Daten auf dem Server berechnen und nur das Ergebnis zur Anzeige übermitteln. Außerdem ist die Frage, ob man wirklich alle Daten sofort benötigt, oder die splitten und bei Bedarf nachladen kann. Außerdem könnte der Split den Vorteil haben, dass man mehrere parallele Threads zum Laden nehmen kann, der Browser lädt ja bei Bilderseiten auch nicht Bild für Bild, sondern parallel. Außerdem könnte man eventuell einen Teil der Daten erst nach Aufbau der Seite laden, das macht es zumindest für den Benutzer gefühlt schneller, da sich etwas bewegt ;)

 

[Tronjer]

Aber wenn der Profi meint es wäre schneller eine separate AJAX-Request zu starten und anschließend umzuwandeln, dann wird es wohl stimmen

Dann fällt das Parsen weg und die Object-Properties könnte man ohne Anführungszeichen schreiben ("), was bei vielen Daten auch einen minimalen Vorteil bzgl. Datenmenge bringen könnte

Ob ich die Daten als HTTP-Request lade, bzw. lokal mit der Endung .json oder .js speichere, ändert doch nichts am Datenformat. Entscheidend ist, dass JSON-style Code zurückgeliefert wird, der sich in JS als Objektliteral abbilden lässt, um mit den Object Properties zu arbeiten.:

var coord = {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  };

coord.properties.name;
coord.geometry;
...
}

 

[scbawik]

Ob ich die Daten als HTTP-Request lade, bzw. lokal mit der Endung .json oder .js speichere, ändert doch nichts am Datenformat. Entscheidend ist, dass JSON-style Code zurückgeliefert wird, der sich in JS als Objektliteral abbilden lässt, um mit den Object Properties zu arbeiten.:

var coord = {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  };

coord.properties.name;
coord.geometry;
...
}

... mir ging es nur um die verhältnismäßig schnellere Initialisierung beim Seitenaufruf!
Dass es nicht schön ist, ist mir schon klar - aber das ist es so oder so nicht beim aktuellen Aufbau des TE.
Habe ja bereits im ersten Post geschrieben, dass es schlecht ist, so viele Daten auf einmal zu laden.

JSON benötigt zwingend Anführungszeichen bei den Properties/Keys. Ein JS Objekt hingegen nicht.
Bei 350000 Koordinaten haben wir also vermutlich mindestens doppelt soviele Anführungszeichen weniger die Übertragen werden müssen. Es liegt also auf der Hand, dass alleine dadurch eine Microoptimierung in Bezug auf Ladezeit und damit Initialisierung erfolgen würde.

 

[Tronjer]

JSON benötigt zwingend Anführungszeichen bei den Properties/Keys. Ein JS Objekt hingegen nicht.

Wie würdest du ein JS Object ohne Single- oder Double Quotes erstellen?

 

[scbawik]

Wie würdest du ein JS Object ohne Single- oder Double Quotes erstellen?

var coord = {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [125.6, 10.1]
  },
  properties: {
    name: "Dinagat Islands"
  }
};

Und jetzt lassen wir das bitte.

 

[Tronjer]

Lol, die Anführungszeichen bei den Strings siehst du aber schon?

 

[scbawik]

Lol, die Anführungszeichen bei den Strings siehst du aber schon?

Ja?! Dennoch habe ich gerade 12 Anführungszeichen entfernt.
Habe nie gesagt dass alle weg müssen/können.

 

[florianluedtke]

Also ich werd euch das ganze nochmal etwas detaillierter erklären, damit hier keine Spekulionen aufkommen: Ich habe mir meinen Google-Standortverlauf als .kml heruntergeladen und das über QGIS in GeoJSON umgewandelt, damit ich die Koordinaten in Leaflet darstellen kann. Wie gesagt, das sind über 350.000 Koordinaten (da kann man mal sehen, was Google so alles innerhalb von drei Jahren sammelt!) und auf der Karte sollen am besten alle Punkte/Routen dargestellt werden. Es gibt viele Doppelte Koordinaten, allerdings wäre das bei der Menge an Daten eine Lebensaufgabe, die alle herauszufiltern. Ich habe bisher keine Funktion/Software gefunden, die mir dabei helfen kann. Deswegen ist es auch "notwendig" alle Daten auf einmal zu laden oder nur die, die auf dem Kartenausschnitt zu sehen sind ( gibt's da eine Funktion für?).
Ich bin ein ehrlich gesagt blutiger Anfänger bei HTML und JS, aber ich bin nicht auf den Kopf gefallen, deshalb könnt ihr mir das ruhig so schreiben, wie ihr denkt. Danke für eure Hilfe!

 

[NetAktiv]

Doppelte Daten finden kann beispielsweise jede gute Tabellenkalkulation wie Excel oder, wenn du deine Daten in eine Datenbank importierst, jede Datenbank mit SELECT DISTINCT. Da du deine Daten ja scheinbar nicht total aktuell benötigst (also nicht bis auf die letzten Sekunden) wäre es sicher sinnvoll, die Daten auf auf dem Server regelmäßig (täglich, bei Bedarf) zu einem Report zusammenzufassen und nur den Report auf den Client zu übertragen. Das sind üblich Vorgehensweisen, wenn es darum geht, große Datenmengen auszuwerten. Nun sind natürlich 350.000 Datensätze nicht groß, aber groß genug, dass man nicht alles bei jedem Aufruf auf den Client übertragen muss.

In einer Datenbank könntest natürlich auch abfragen definieren wie: Gib mir alle Punkte im Umkreis von xx km um den Geopunkt yy, die ich im Zeitraum von ... bis besucht habe.