CSS Transition, geringe Performance

[nietaL]

Hey Leute,

ich habe eine Landkarte mit eine Auflösung von 7382x6040 Pixeln, die mit Hintergrund eines divs ist. Dieses ist mit height und width tags herunterskaliert auf 1100x900.

[src=html4strict]<div id="map_img" style="position:absolute; width: 1100px; height: 900px; left:0px; top:0px; transition: 0.5s; z-index:1; background-image:url(img/maps/insel/_hg.jpg), url(img/maps/struktur.jpg); background-blend-mode: multiply; background-size: contain;"></div> [/src]

Per Doppelklick wird eine JS-Funktion angesprochen, die die height und width des o.g. divs auf die Werte der Karte erhöht (durch einfaches Neusetzen). Durch transition ist es schön smooth. Das Problem ist, dass dazu noch mehr Layer kommen, gleiche Größe, die auch parallel mitgezoomt werden müssen. Denn obwohl die Dateigrößen lächerlich sind (Karte: 5MB), geht meine CPU sofort auf Volllast und der RAM wird bis ins Limit geschröpft. Die Frames bei der Transition brechen ein.

Hat jemand einen Tip, wie ich die Performance verbessere, bzw. ja ehrlich gesagt überhaupt erst ermögliche?

Ich habe davon mal ein Video aufgenommen. Im Firefox geht das ganze noch so halbwegs, obwohl es auch schon keinen Spaß mehr macht. Chrome stürzt dabei gleich ab.

You do not have permission to view link please Anmelden or Registrieren

Hier eine frühe Experimentiert-Version, die ihr ausprobieren könnnt.

You do not have permission to view link please Anmelden or Registrieren

Beim Reinzoomen hakelts (Chrome). Rauszoomen geht nur über Neuladen per Enter in URL-Zeile.

 

[theSplit]

Also mit der Demo werde ich nicht schlau aus dem Problem, meine CPU Last geht zwar auch in die Höhe, zumindest auf einem Kern - aber ich sehe das Problem nicht.

Grundsätzlich folgende Überlegung, da ich das aus deinem Code Schnipsel nicht sehe:
"Welche CSS Properties müssen wann animiert werden?" -> 1) Größe, Position? - Nicht der Background-img, nicht die Backgrund-size, die die Blendmode - sondern genau angeben/auf etwas reduzieren (zum Beispiel wenn die Karte gezoomt ist, braucht ja nur die Position animiert werden, zum scrollen/weiterzoomen, zum Beispiel über Javascript das CSS Transition-Property umschreiben.
Dann wäre die Überlegung zu testen wie es mit einem "Transform: Scale + Position" aussieht, wäre damit die Performance besser bzw. das gleiche zu realisieren? (Zum Beispiel das Bild mit voller Pixelbreite auf volle 6/7 % herunterskaliert und dann nur noch wieder "großgezoomet" wird auf "scale: 1" bei Doppelklick.

Background-size: contain, hier würde ich das Bild entsprechend anpassen, ohne CSS, ich weiß nicht ob das CSS gutes tut, weil ja immer versucht wird das Bild im "Rahmen" zu halten - das heißt kein krummes 7382x6040 Pixel Bild, bringst du in einen 11:9 Ratio - aktuell hast du ne Skalierung von 6,7% in der Höhe und Breite - der Wert ist schon krumm, und halbe ".x%" könnte merkwürdig interpoliert werden, das heißt du hast auch vielleicht nen Qualitätsverlust wegen "halber %".

"Transition-Property" - dem Browser mitteilen was genau animiert werden muss und was egal ist.

Für mehr bräuchte man mal etwas mehr Code und eine ordentliche Spielwiese.

Edit: Hier auch ein Artikel dazu:

You do not have permission to view link please Anmelden or Registrieren

 

[dexter]

Mal anders gedacht: gibts Die Geodaten in irgendner Rohform wie XML? Dann würde ich an Deiner Stelle drüber nachdenken, das mit leaflet oder openlayers zu bauen.

Was hat's denn mit der festen Fenstergrösse auf sich, kannst Du sicherstellen, dass die bei allen Nutzern auch gegeben ist?

 

[nietaL]

Danke euch beiden. Ich habe versucht, es mit transform umzusetzen, was mir auch gelungen ist. Aber das Problem blieb. Ich vermute es hängt einfach mit dem riesengroßen Bild zusammen. Denn je kleiner das Bild ist, desto geringer fällt das Problem ins Gewicht. Zusätzlich ist das Bild nämlich auch noch verschiebbar, wie in dem Video zu sehen. Warum bei dir jetzt alles flüssig lief, kann cih nicht nachvollziehen. Wir haben es auf mehreren Maschinen und Browsern probiert. Die Auswirkungen waren siginfikant unterschiedlich, aber nie völlig unproblematisch. Es kann ja nicht sein, dass man beim Besuch meiner Seite den PC auf Höchstleistung betreiben muss. Ich zoome nun nur Kartenausschnitte.

Ich habe mir auch leaflet und openlayers angesehen. Das wäre zwar technisch sicher möglich, aber irgendwie ein Overkill. Der Aufwand steht in keinem Verhältnis zum Nutzen der Zoomfunktion. Das ist eher ein kleines Gimmik. Trotzdem vielen Dank!

 

[KingJamez]

Es kann ja nicht sein, dass man beim Besuch meiner Seite den PC auf Höchstleistung betreiben muss.

Aber es sollte ansich auch nicht sein, das man insgesamt 7mb lädt, alleine deine Karte hat 5mb. Ich verstehe ja, das du da reinzoomen willst und deshalb so großes Material nutzt aaaaabber: das ist schon ein bisschen hart.
Wenn du wirklich mit Bildern arbeiten willst, mache es wie google maps und lade einzelne bilder in einem raster, je nach zoomlevel lädst du eben neue bilder - das ist am ende mehr traffic, ich weiß, wird sich aber positiv auf die performance auswirken.

Schon mal über SVG in dem Fall nachgedacht? Bei laden der Seite lädst du eine "ausgezoomt-svg" - diese enthält die groben Rahmen der Inseln, das Wasser und vielleicht minimal, als Fläche angedeutet die Stützpunkte.
Zoomlevel 1: Die Karte wird detailierter. Zeichne eine zweite SVG (gleiches maß der ersten) und schaffe ein paar mehr details. Diese Karte wird über die allererste Karte gelegt
Zoomlevel 2: Enhält noch mehr Details, wird über die 2te Karte gelegt.
und so weiter..

 

[drfuture]

Davon abgesehen dürfte gerade so eine Karte als SVG nur ein paar 100kb haben auch mit allen Details.