skip to Main Content
Header Balls Bechmark

Wielkość DOM(u) ma znaczenie – animacja kulek – benchmark

W ostatnim poście pisałem o animacji ładowania w postaci 3 kulek. Łukasz przygotował inną implementację falujących kulek.

See the Pen Animated balls loader by soltys (@soltys) on CodePen.

Używa znacznie mniej elementów HTMLa, a trójkę kulek wystarczy tyle:

W celu przetestowania obu rozwiązań skopiowaliśmy kod HTMLa 500 razy i zmieniliśmy trochę CSSa tak by kulki wyświetlały się obok siebie.

Rysunek podglądowy 🙂

mulple_circles

Testowano pod Chromem

Kategoria Paweł (ja) Łukasz
DOMContentLoaded [ms] 615 252
Load [ms] 619 293
FPS 27 35
GPU Mem used 45,7 23,4
Profiler heap ilość elementów 13509 6005
RAM used [KB] 214 516 171 140
RAM CSS [KB] 5,2 6,1

Dlaczego rozwiązanie Łukasza jest lepsze?

Mniej elementów w DOM, to mniejszy kłopot dla przeglądarki.

Dwukolorowy środek został osiągnięty poprzez wykorzystanie liniowego gradientu.

Podsumowanie

Tak moje rozwiązanie jest gorsze pod każdym aspektem, które mierzyliśmy. Z drugiej strony, każde rozwiązanie jest szybkie dla małego N – gdzie N to wielokrotność 3 kropek. Zawsze należy myśleć pozytywnie 😀.

Paweł Sołtysiak

Programista, domowy kucharz i "amator amerykańskiej polityki".
Zbieram informacje z całej sieci, po odrzuceniu chwastów i dodaniu swojej opinii publikuje na blogu.

Back To Top