• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

CSS Transition, geringe Performance

nietaL

NGBler

Registriert
8 Sep. 2013
Beiträge
231
Ort
Exilgullianer
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? :confused:

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.

https://youtu.be/H2VxtSTAgc8


Hier eine frühe Experimentiert-Version, die ihr ausprobieren könnnt. http://www.ouraltis.de/experiment/
Beim Reinzoomen hakelts (Chrome). Rauszoomen geht nur über Neuladen per Enter in URL-Zeile.
 
Zuletzt bearbeitet:

theSplit

1998
Veteran Barkeeper

Registriert
3 Aug. 2014
Beiträge
28.561
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. :p

Edit: Hier auch ein Artikel dazu:
https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
 
Zuletzt bearbeitet:

dexter

Cloogshicer®
Teammitglied

Registriert
14 Juli 2013
Beiträge
5.306
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

NGBler

Registriert
8 Sep. 2013
Beiträge
231
Ort
Exilgullianer
  • Thread Starter Thread Starter
  • #4
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

Aktiver NGBler

Registriert
18 Juli 2013
Beiträge
501
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

Zeitreisender
Teammitglied

Registriert
14 Juli 2013
Beiträge
8.728
Ort
in der Zukunft
Davon abgesehen dürfte gerade so eine Karte als SVG nur ein paar 100kb haben auch mit allen Details.
 
Oben