background-image transitionieren

[Rolf B]

Hallo Gunnar,

Ich weiß nicht, wie teuer die Abfrage im Vergleich zum Debouncer ist.

Was Dich nicht hindert, mir Unfähigkeit vorzuwerfen.

Da hilft dann nur Messen. Ich habe die Seite aus dem Fiddle geholt und in eine HTML Seite gesteckt hier und die Performance-Tools von Chrome mitlaufen lassen. Um deutlicher zu sehen, was passiert, habe ich den toggle aufgelöst und die eigentlichen Aktionen in separate Funktionen gesteckt, half aber nichts, Chrome hat mir keinen detaillierten Callstack gemacht. Hmpf. Die Aufrufe von classList.add und classList.remove sieht man aber - aber nur, wenn auch wirklich was passiert. Das erkennt man daran, dass nach diesen Aufrufen die Animation losläuft, die hat einen eigenen Balken im Performance-Graph.

Vermutlich passiert zu wenig, um ein Re-Layout auszulösen, und Chrome optimiert das weg. Dass pageYOffset eigentlich relayouten muss, ist schon naheliegend. window.scrollY ist schließlich in der Liste der Layout-forcierenden Funktionen drin.

Ich hab mal einen "margin-wackler" eingebaut, der bei jedem Scroll-Aufruf den Margin des Body verändert. Dann gibt's bei jedem scroll-Aufruf eine Layout-Phase während des Javascript. Wenn ich die pageYOffset-Abfrage, gibt's die Layout-Phase trotzdem, aber erst nach Script-Ende. Und wenn ich das hier mache, gibt's 2 Layoutphasen pro scroll-Event:

function handleScroll() {
   document.body.style.setProperty("margin-inline", (8+d)+"px");
   d = -d;

   changeBackground(); // enthält pageYOffset-Abfrage

   document.body.style.setProperty("margin-inline", (8+d)+"px");
   d = -d;
}

Kommentiere ich die changeBackground-Zeile aus, gibt's erwartungsgemäß keine Layoutphase im Eventhandler (außer beim ersten Mal).

Also, ja, pageYOffset hat das Potenzial zu einem Performancekiller. Ohne diese Messungen hier hätte man das aber nicht sicher beurteilen können. Für den Hintergrundbildwechsler ist das Throttling irrelevant.

Ich habe mal den Throttler aus dem Wiki eingebaut. Bei 50ms Throttlelimit hat man nicht viel davon, aber bei 100ms merkt man schon die leichte Verzögerung. 250ms sieht doof aus. Wie stark es sich auswirkt, hängt auch an der Framerate. Bei 60 Hz kommt das Scroll-Event alle 16,7ms. Ich habe 100Hz, da sind es 10ms und 50ms Throttle-Limit fünfteln die Anzahl der Abfragen schon. Mein "Mess-Ablauf": Performancetools einschalten, Seite runter, rauf, runter, rauf scrollen, Performancetools stoppen. Jeweils ca 3s Dauer. Ohne Throttle sinds ca 100ms Renderingzeit, mit Throttle geht es auf 25-40 runter, je nach Stärke. Das liegt aber am Margin-Wackler. Nehme ich den raus, hat das Throttling keinen messbaren Einfluss mehr auf die Renderingzeit.

Kannst gern selbst messen.

Rolf