XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   scroll-Verknüpfung - Hinweis (http://xhtmlforum.de/showthread.php?t=73671)

KATERchen 31.10.2018 10:39

scroll-Verknüpfung - Hinweis
 
Hallo,
ich habe einen Sticky-Header mit einer Animation "ausgestattet". Jetzt erhalte ich in den Entwickler-Tools den Hinweis:
Zitat:

Diese Website verwendet anscheinend einen scroll-verknüpften Positionierungseffekt. Dies könnte mit asynchronem Verschieben (Panning) schlecht zusammenspielen; siehe https://developer.mozilla.org/docs/M...lLinkedEffects für weitere Details und nehmen Sie an der Diskussion über damit verbundene Werkzeuge und Funktionen teil!
Kann mir jemand erklären, was es damit auf sich hat?
Hier mal mein Code

cloned 31.10.2018 11:01

.on('scroll') sollte vermieden werden da dies nicht ressourcenschonend ist. Das Event wird jedesmal abgefeuert und ausgewertet wenn du scrollst und verursacht dadurch dann viele Layoutprobleme.

Für eine kleine Seite kann das vernachlässigt werden aber besser ist es, hier so etwas wie intersectionObserver einzusetzen https://developer.mozilla.org/en-US/...n_Observer_API

Alternativ kann das scroll Event auch passiv verwendet werden:
https://github.com/WICG/EventListene...s/explainer.md
https://developers.google.com/web/up...vent-listeners
https://blog.chromium.org/2016/05/ne...s-improve.html
https://alligator.io/js/speed-up-scroll-events/

KATERchen 31.10.2018 11:04

.on('scroll') benutze ich gar nicht.
Ich sollte vielleicht auch noch hinzufügen, dass ich kaum englisch verstehe. Werde aber trotzdem mal versuchen, aus den Links was zu erfahren.
Danke :)

cloned 31.10.2018 11:15

Zitat:

Zitat von KATERchen (Beitrag 553139)
.on('scroll') benutze ich gar nicht.

Siehe dein Beitrag hier vor 2 Tagen ;)
https://xhtmlforum.de/73666-mouselea...tml#post553125

Zitat:

Zitat von KATERchen (Beitrag 553125)
Das mit dem .on werde ich mir merken, auch hier danke :)

.scroll() ist nichts anderes als .on('scroll').

Um die Seiten zusammenzufassen und auf deutsch zu übersetzen:
Jedesmal wenn du scrollst dann wird dein Event abgefeuert und alles neu berechnet, das geht auf die performance.
Deshalb meinte ich auch: Wenn es nur für eine Seite rein für dich ist, dann passt das schon. Da wirst du keine beeinträchtigung sehen.
Falls du aber mehr JS auf der Seite verwendest dann kann das auf schwächeren Geräten (wie zB auch mobilen Geräten) die Seite ausbremsen, was dann den Effekt hat, dass die Seite "ruckelt" oder sich einfach nicht flüssig anfühlt für die User.

Deshalb gibt es die verlinkten Alternativen, leider gibt es generell für Webtechnologien mehr Infos auf englisch, falls ich etwas auf deutsch finde werde ich es dir noch nachreichen.

KATERchen 31.10.2018 11:20

Ach so, habe ich falsch verstanden. Du meinst, ich sollte ganz auf das .scoll() verzichten?
Im Augenblick wäre das aber auch nicht so wild. Die ganze Seite ist eigentlich nur dazu da, mich nach einigen Jahren Pause wieder rein zu finden und zu sehen, was es neues gibt. Ich habe nicht wirklich geplant, sie irgendwann hoch zu laden. Trotzdem sind das aber tolle Tips - Danke :)

cloned 31.10.2018 11:25

Fürs lernen und üben lass es drinnen, wenn es auch das einzige ist was .scroll verwendet dann wird es schon nicht so schlimm sein.
Aber für wirkliche Projekte ist es besser die alternativen zu verwenden die ich gepostet habe :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019