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

0 głosów
77 wizyt
pytanie zadane 5 dni temu w JavaScript, jQuery, AJAX przez jvrekk Nowicjusz (180 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ź 5 dni temu przez Bartłomiej Mirek Obywatel (1,480 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 5 dni temu przez Tomasz Sochacki Stary wyjadacz (10,860 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 5 dni temu przez Comandeer Mentor (354,540 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 4 dni temu przez jvrekk Nowicjusz (180 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 4 dni temu przez Comandeer Mentor (354,540 p.)
Nie, style będą przy każdym sposobie nieustannie zmieniane. Nie bardzo jednak rozumiem, jaki problem to powoduje…
komentarz 4 dni temu przez jvrekk Nowicjusz (180 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 4 dni temu przez Comandeer Mentor (354,540 p.)

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

komentarz 20 godziny temu przez jvrekk Nowicjusz (180 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ź 58 wizyt
pytanie zadane 19 stycznia w JavaScript, jQuery, AJAX przez Mikruuus Początkujący (330 p.)
0 głosów
1 odpowiedź 85 wizyt
pytanie zadane 19 października 2016 w JavaScript, jQuery, AJAX przez Muhin Obywatel (1,590 p.)
+1 głos
2 odpowiedzi 99 wizyt

36,094 zapytań

72,754 odpowiedzi

140,028 komentarzy

16,786 pasjonatów

Przeglądających: 189
Pasjonatów: 21 Gości: 168

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.

...