• 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ŚĆ

Ultraszybki serwer VPS NVMe START
0 głosów
83 wizyt
pytanie zadane 17 lipca w JavaScript, jQuery, AJAX przez jvrekk Użytkownik (900 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 przez Bartłomiej Mirek Bywalec (2,310 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 przez Tomek Sochacki Pasjonat (20,950 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"...?)
komentarz 17 lipca przez Comandeer Mentor (374,970 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 przez jvrekk Użytkownik (900 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 przez Comandeer Mentor (374,970 p.)
Nie, style będą przy każdym sposobie nieustannie zmieniane. Nie bardzo jednak rozumiem, jaki problem to powoduje…
komentarz 17 lipca przez jvrekk Użytkownik (900 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 przez Comandeer Mentor (374,970 p.)

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

komentarz 21 lipca przez jvrekk Użytkownik (900 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

0 głosów
1 odpowiedź 84 wizyt
pytanie zadane 7 listopada w JavaScript, jQuery, AJAX przez lastavenger Użytkownik (920 p.)
0 głosów
2 odpowiedzi 50 wizyt
0 głosów
1 odpowiedź 60 wizyt

41,561 zapytań

80,609 odpowiedzi

159,525 komentarzy

19,835 pasjonatów

Przeglądających: 264
Pasjonatów: 26 Gości: 238

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...