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 🙂

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.

background: linear-gradient(to bottom, #999999 0%, #999999 50%, #777777 50%, #777777 100%);

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 😀.