Monitorizarea performanței în animațiile CSS

(Virendra Singh) (22 aprilie 2020)

Animație folosind JavaScript ? sau Animație utilizând CSS ?

Această întrebare lovește fiecare dezvoltator o dată, sau probabil de două ori sau mai multe, în cariera lor tehnică.

De-a lungul timpului, geek-urile Javascript au venit cu o mulțime de biblioteci pentru a face animație în browser și pentru toată lumea. pare convins să folosească aceste biblioteci ca soluție disponibilă. Dar, așteaptă, aceasta este soluția corectă? Ar trebui să facem animații folosind JavaScript? Sau, ne putem baza pe implementarea CSS nativă pentru a realiza animații într-un mod mai performant și mai bun?

Întrucât citiți acest blog, presupun că sunteți familiarizați cu animațiile JavaScript. Deci, să explorăm „animația bazată pe CSS” în detaliu și diversele arome ale animației CSS, împreună cu implicațiile lor de performanță.

Fundația animației se bazează pe unele proprietăți CSS pe care le veți folosi adesea în animațiile bazate pe CSS implementări.

poziție: (absolut / relativ)

transform

opacitate

stânga, dreapta, sus, jos și multe altele.

Să începem examinând rezultatele a două experimente cu proprietăți CSS diferite pentru animație.

(a) poziția absolută cu stânga și sus

(b) transforma

În plus, de ce nu încercăm să tragem concluzii privind performanța și timpul de redare pe baza acestor experimente?

Privind aceste două exemple, se pare că este similar funcționalitatea a fost imp lementat în ciuda utilizării abordărilor diferite. Cu toate acestea, atunci când măsurăm valorile de performanță în instrumentul de dezvoltare Chrome, observăm o diferență reală în ceea ce privește performanța pentru ambele cazuri.

Înainte de a ne arunca cu capul pentru a înțelege aceste valori de performanță, trebuie să înțelegem cum browserul redă interfața de utilizare și toate acțiunile pe care le efectuează atunci când orice actualizare are loc pe interfața de utilizare.

Deci, crearea interfeței de utilizare începe cu:

1) Calculați stilurile care urmează să se aplice elementelor (Recalculați stilul)

2) Creați aspectul elementelor și poziționați-le pe ecran (Aspect)

3) Adăugați pixeli în toate aspectele create, este mai mult să creați bitmap pentru fiecare strat. GPU folosește această bitmap pentru a reda stratul de pe ecran (Paint)

4) În cele din urmă, creați straturile de pe ecran, construind un teanc de straturi. Vederea de sus a acestei stive va arăta ca o pagină web completă în care fiecare element are propria poziție (Straturi compozite)

Crearea stratului compozit este un loc în care CPU vorbește cu GPU, pentru a gestiona animația. Folosind proprietăți precum transform și opacitate, putem forța browserul să facă animație folosind GPU în loc de CPU.

Deci, cum ne ajută GPU să realizăm o animație lină?

GPU este o altă mașină mică care se ocupă de animația noastră și poate gestiona un număr mare de calcule UI.

Deci, atunci când se declanșează crearea stratului compozit, creează un alt strat. Acesta este un alt mod de a ne ajuta să evităm redarea elementului care se animă și a altor părți ale elementelor UI.

În imaginea de mai jos, ambele bile roșii par să se afle pe același strat. Dar, când mutăm acest strat în rotație 3D, descoperim că Transform animația are un alt strat care a fost creat pentru mingea roșie, oferind animație lină.

GPU păstrează acest arbore de obiect de redare în memorie și, fără a reda din nou , poate pune acest strat deasupra celorlalte. Dar, în cazul animației din partea stângă sus, același strat este redat din nou și din nou din cauza modificărilor acestor proprietăți. Dacă verificăm comportamentul acestor două proprietăți CSS, vom vedea că ambele proprietăți au lăsat și sus influențează aspectul, provocând, de asemenea, o revopsire și o operație compozită.

Traduceți vs Top / Stânga

Animația de mai sus a mingii are o diferență clară între traduce vs sus / stânga .

În cazul sus / stânga animație, mingea este redată pe fiecare poziție până când ajunge la destinația finală și, când începe din nou să se deplaseze în poziția inițială, pornește partea de redare.

Notă: Culoarea violet reprezintă crearea de aspect a bilei roșii, iar culoarea verde este utilizată pentru a înregistra pixeli.

Ambele imagini de mai sus sunt o captură de ecran a modului în care traduce vs sus / stânga .

Prin evidențierea unei singure sarcini a fiecăruia, începem să înțelegem că activitatea desfășurată de sarcină este diferită în ambele cazuri. În cazul din sus / stânga , sarcina a realizat crearea aspectului, pictarea și recalcularea stilului. În cazul traducerii , o singură sarcină efectuată de GPU mută stratul compozit fără a reda nimic în DOM.

Deci, cu puterea GPU, ne păstrăm firul principal. Acest lucru ne ajută să îmbunătățim performanța aplicației, iar firul nostru principal este aspectul de redare ocupat.

Graficul metric de performanță de mai sus oferă mai multe dovezi, explicând în ce măsură firul nostru principal este ocupat cu aspectul și recalcularea stilului. Acest grafic reflectă în mod continuu schimbările care au loc în interfața de utilizare.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *