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

Efekt kurzu w jquery

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
458 wizyt
pytanie zadane 16 maja 2015 w JavaScript przez kamilwdg18 Obywatel (1,080 p.)
Witam, znalazłem takie coś:

http://tympanus.net/Development/AnimatedHeaderBackgrounds/index2.html

Bardzo mi się to podoba, i moje pytanie brzmi jak uzyskać efekt tych lecących w górę cząsteczek w jquery?

2 odpowiedzi

+1 głos
odpowiedź 16 maja 2015 przez Comandeer Guru (606,160 p.)

W jQuery robienie tego typu rzeczy jest po prostu bez sensu. Ta biblioteka znana jest ze swej niskiej wydajności w wypadku animacji, co spowodowane jest po prostu przestarzałą konstrukcją jej bebechów (np. wszystkie animacje są oparte głównie na setTimeout).

Zostawiłbym to w takim stanie, w jakim jest obecnie - a więc w oparciu o duet canvas + requestAnimationFrame. Lepszej wydajności w jQuery na pewno mieć nie będziesz. Jedyne, co ta biblioteka może ułatwić, to samo stworzenie odpowiednich elementów… i tyle.

komentarz 16 maja 2015 przez PreZmyK Pasjonat (21,470 p.)
A w czym/jak polecasz uzyskanie podobnego efektu przy zachowaniu maximum wydajności?
komentarz 16 maja 2015 przez Comandeer Guru (606,160 p.)

Na pewno zostawiłbym obecne wykorzystanie requestAnimationFrame, bo to jest główna rzecz tutaj, która sprawia, że chodzi to tak płynnie.

W sumie nie wiem czy da się jakoś to specjalnie wydajniej napisać od tego, co jest obecnie ;)

komentarz 16 maja 2015 przez Apsik Użytkownik (990 p.)
requestanimationframe nie jest tak zajebistą techniką jak się wielu wydaje.. ja i tak zostałbym przy setTimeout wydajność przeglądarki w ch*j idzie w góre!
komentarz 16 maja 2015 przez Comandeer Guru (606,160 p.)
Owszem, jest ;) Różnica polega na interpretacji rAF vs setTimeout przez event loop przeglądarki.

rAF jest odpalany wówczas, gdy event loop nie robi nic i animacja jest dorzucana na końcu aktualnego "ticku". W ten sposób animacja jest odpalana wówczas, gdy przeglądarka może sobie na nią pozwolić.

setTimeout z kolei po prostu kolejkuje daną czynność i "wbija się" w event loop, żeby odpalić się jak najbliżej ustawionego dla siebie czasu. Tym sposobem animacja może się odpalić wówczas, gdy przeglądarka będzie zajęta czymś innym, obniżając wydajność całego programu.

Co do wydajności przeglądarki - problemem nie jest sama przeglądarka, ale model wykonywania JS, czyli właśnie jednowątkowy event loop. Tu za bardzo nie ma jak kombinować. A najlepszym dowodem na to, że wydajność JS coraz trudniej podnieść, jest wprowadzenie kompilatora AOT w miejsce JIT (czyli asm.js i de facto kompilowanie JS)
komentarz 21 maja 2015 przez Apsik Użytkownik (990 p.)
rAF jest wyonywany, podczas odświerzania przeglądarki, ale gdy pierdolniesz duża ilość obiektów przeglądarka muli jak fiks zamkniecie zminimalizowanie czy powiekszenie okna jest praktycznie nie możliwe. Tak wiec ta technologia jest w ch*j niedopracowana i wole stracić na fpsach ale wiem że w każdej chwili moge wyłączyć przeglądarke. Ktoś mądry porównywałby ruch z czasem a nie ilością fpsów, bo czas jest stały tzn stale rośnie a fpsy nie! wszystko zależy od obciążenia procesora. Dlatego nie używam rAF. set interval działą podobnie gdy przegladarka jest zminimalizowana lub odpalona jest inna karta animacja nie jst wykonywana.
komentarz 21 maja 2015 przez Comandeer Guru (606,160 p.)
Timery też się blokują w event loop… i to nawet gorzej, bo są wywoływane jako część loopu. rAF jest jak gdyby "doklejany" gdy przeglądarka ma możliwości, przed paintem, aby wywołać minimalny reflow.

Poza tym - skąd info o fpsach? rAF nie patrzy na na fps tylko wykonuje się w nieregularnych odstępach czasu (w przeciwieństwie do timerów, które mają dość stałe okresy wykonywania). Polecam poczytać o delta timing w JS.

Co do niewykonywania animacji gdy karta jest niewidoczna: przecież rAF tak działa - tak samo jak timery.

Za dużo obiektów? Od tego jest canvas, nie DOM. Wystarczy przewidzieć co się będzie tworzyć. Operacje na wielu elementach DOM nigdy nie są wydajne - stąd przecież powstał React z virtual DOM i async DOM… oparty nota bene na rAF…

Warto też popatrzeć na optymalizacje w silnikach gier, gdzie logika jest oparta na timerach, a sama grafika na rAF.

I na koniec - rAF jest optymalizowany pod GPU, timery pod CPU. Zostawiam to pod rozwagę ;)
+1 głos
odpowiedź 16 maja 2015 przez err0r Obywatel (1,520 p.)
Na stronie, która wysłałeś jest źródło tego efektu, możesz pobrać i sprawdzić :)

Podobne pytania

0 głosów
0 odpowiedzi 376 wizyt
0 głosów
4 odpowiedzi 1,197 wizyt
0 głosów
1 odpowiedź 182 wizyt
pytanie zadane 16 marca 2019 w JavaScript przez Skipto Początkujący (300 p.)

93,113 zapytań

142,093 odpowiedzi

321,656 komentarzy

62,453 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...