css keyframes vs js setInterval WYDAJNOŚĆ

Question

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

Answer 1

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ć.

Comments

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"...?)

---

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.

---

@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?

---

Nie, style będą przy każdym sposobie nieustannie zmieniane. Nie bardzo jednak rozumiem, jaki problem to powoduje…

---

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ć?

---

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

---

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?