Efekt kurzu w jquery

Question

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?

Answer 1

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.

Comments

A w czym/jak polecasz uzyskanie podobnego efektu przy zachowaniu maximum wydajności?

---

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 ;)

---

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!

---

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)

---

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.

---

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ę ;)

Answer 2

Na stronie, która wysłałeś jest źródło tego efektu, możesz pobrać i sprawdzić :)