• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

css keyframes vs js setInterval WYDAJNOŚĆ

Object Storage Arubacloud
0 głosów
364 wizyt
pytanie zadane 17 lipca 2017 w JavaScript przez jvrekk Użytkownik (970 p.)
Witam jestem w trakcie nauki js'a i stworzylem 2 wersje animacji, najpier napisaną w samym js. Po zaglebieniu się w tematyce wydajnosci dowiedzialem sie ze wywolywanie funkcji przez setInterval nie jest zbyt korzystne w połączeniu ze zmianą atrybutu pozycji bottom. Początkowo chcialem przerobic animacje zmieniając ją na transform:translateY(wartość) jednak po kilku godzinach rozmyślania nad sposobem zerowania pozycji znalazłem prosty szybki sposób czyli zrobić po prostu keyframes w css. Taki sposób powinien być najwydajniejszy jednak zauwazylem ze niestety płynność mojej strony po wrzuceniu kodu z keyframes jest znacznie wolniejsza niż w przypadku animacji z js'a. Strona sprawdzana na kompie z i5 3470 z integrą hd2500 wiec nie wiem czy sądzić ze to kwestia słabej grafiki czy jednak kod js'a jest optymalniejszy. Wiem ze keyframes oraz  transform:translateY kladzie nacisk na GPU dlatego nie wiem ktory kod bedzie wydajniejszy dla ogółu.

https://codepen.io/Jvrekk/pen/gRyLjR   - wersja z keyframes

https://codepen.io/Jvrekk/pen/zzXvoq - wersja z js

1 odpowiedź

0 głosów
odpowiedź 17 lipca 2017 przez Bartłomiej Mirek Bywalec (2,290 p.)

Tutaj wszystko jest ładnie wyjaśnione.
A wg mnie lepiej używać JS gdyż daje to większą kontrolę, a o różnice w wydajności bym się nie martwił ponieważ w 99% przypadków jest ona zbyt mała aby się tym przejmować.

komentarz 17 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)
ehh i po intensywnym rozwoju JS (ES5, ES6, ES7...) znowu wracamy do robienia śniegu w JS :)

Obsługa animacji CSS (@keyframes) myślę, że będzie coraz lepiej wspierana przez przeglądarki i będą one to optymalizować, dlatego uważam, że tędy własnie droga, a nie usilne ładowanie JS do prostych animacji. Osobna kwestia do czego Ci de facto taka animacja jaką zrobiłeś? (czy na pewno chcesz na swojej stronie taki animowany "śnieg"...?)
1
komentarz 17 lipca 2017 przez Comandeer Guru (603,480 p.)

w 99% przypadków jest ona zbyt mała aby się tym przejmować.

i dlatego jQuery odrzuciło setInterval na rzecz requestAnimationFrame

Obecnie JS używa do optymalizacji animacji ten sam silnik, co CSS. Ba, animacje wręcz powstają w ten sam sposób (patrz: Web Animation API). Prawda jest taka, że bez JS-a nie da się zrobić żadnych animacji związanych z działaniami użytkownika.

komentarz 17 lipca 2017 przez jvrekk Użytkownik (970 p.)

@Tomasz Sochacki Strona z moim portfolio stworzona na wordpresie ze stylistyką galaktyczną. Te gwiazdki nie będą latać po całej stronie tylko w jednym miejscu z pustym divem i typograficznym napisem, wszystko sie fajnie komponuje z efektem paralaxy i filmem z ujęciem gwiazd w tle. Nie ukrywam ze widziałem już taką animacje jednak zrobioną tylko przy uzyciu sass, ja postanowilem ją zrobić w js z elementem losowości. Wersje z samym js jest o tyle lepsze ze animacja cały czas idzie do góry natomiast z keyframes tego raczej nie zrobie przez po pewnym czasie animacja musi sie cofać.

Osobiście zostawiłbym wersje napisaną w samym js jednak problem z nią jest taki ze plik css jest co chwile aktualizowany co widać sprawdzajac inspektorem przeglądarki ze nie da się nic zmienić w stylach gdyz co chwile jest aktualizowany. Czytałem coś właśnie o requestAnimationFrame czy to rozwiązało by problem ktory opisałem?

komentarz 17 lipca 2017 przez Comandeer Guru (603,480 p.)
Nie, style będą przy każdym sposobie nieustannie zmieniane. Nie bardzo jednak rozumiem, jaki problem to powoduje…
komentarz 17 lipca 2017 przez jvrekk Użytkownik (970 p.)
Pierwszy raz sie po prostu z takim czymś spotkałem i myślalem ze tak nie powinno być. Ale skoro nie widać problemu to myślę, ze nie widzialem tego przez to ze wczesniej nie uzywalem tak szybkich wywoływań kodu.

Czyli koniec końców dużej róznicy nie bedzie niezależnie jaki sposób wybiore i nie ma co tu dużo rozmyślać?
komentarz 17 lipca 2017 przez Comandeer Guru (603,480 p.)

Dopóki nie będzie to setInterval, to tak: dużych różnic nie będzie.

komentarz 21 lipca 2017 przez jvrekk Użytkownik (970 p.)

Wykonałem 3 wersje tej animacji tym razem jednak nauczylem sie canvas i uzylem requestAnimationFrame. Z tego co widze to chyba jest to najwydajniejsza opcja. Co o takim kodzie sądzicie?

 

Podobne pytania

+1 głos
2 odpowiedzi 159 wizyt
pytanie zadane 30 stycznia 2021 w HTML i CSS przez x_000 Obywatel (1,460 p.)
0 głosów
2 odpowiedzi 350 wizyt
pytanie zadane 21 lutego 2020 w HTML i CSS przez an0nymous123 Początkujący (280 p.)
+1 głos
1 odpowiedź 265 wizyt
pytanie zadane 25 maja 2021 w Python przez Oskar Szkurłat Bywalec (2,780 p.)

92,757 zapytań

141,679 odpowiedzi

320,429 komentarzy

62,101 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...