Microsoft adaugă fila Straturi compuse în instrumentul Vizualizare 3D

Microsoft surprinde dezvoltatorii web cu o nouă caracteristică injectată în el Instrument Vizualizare 3D, care face parte din Instrumentele de dezvoltare (Dev Tools). Anunțată marți, caracteristica numită fila Straturi compuse se va alătura altor instrumente ale instrumentelor 3D View utilizate pentru rezolvarea problemelor obișnuite de dezvoltare web, cum ar fi barele de defilare inutile, problemele de stivuire z-index și complexitatea DOM.

Funcția Straturi compuse este menită să fracționeze pagina web în numărul potrivit de straturi. Microsoft Edge Senior Product Manager Patrick Brosset spune că va fi util atunci când componentele sunt animate sau se schimbă independent de restul. Se poate aminti că Microsoft Edge DevTools avea anterior un instrument separat de straturi care oferă aceeași funcționalitate. Cu toate acestea, compania a decis să elimine panoul pentru acesta, ceea ce a dus la fuziunea acestuia cu instrumentul Vizualizare 3D.

Într-o postare pe blog care anunță sosirea noii caracteristici, Brosset detaliază și cât de importante sunt straturile și cum se întâmplă practic pe web, discutând despre activitatea motoarelor de randare a browserului la nivel înalt. Potrivit acestuia, un motor de browser urmează o serie de pași pentru a trece de la HTML și CSS la pixelii de pe ecran. Aceste proceduri includ analizarea codului HTML și crearea arborelui DOM, analiza codului CSS și obținerea de informații despre stil și aspect, producerea unei noi structuri arborescente și pictarea paginii pe ecran.

„În acest ultim pas, motorul poate decide să picteze pagina dintr-o singură mișcare sau să o împartă în mai multe straturi, să le picteze individual și apoi să compună imaginea finală din ele”, notează Brosset. „Există proprietăți specifice CSS și elemente HTML care fac motorul să decidă să creeze un strat separat. De exemplu, utilizarea unei proprietăți de transformare 3D sau a proprietății will-change face ca motorul să creeze straturi. În acest fel, atunci când conținutul din aceste straturi se schimbă, motorul trebuie doar să revopsească aceste straturi individuale și nu întreaga zonă de vizualizare.”

Făcând clic pe fila Straturi compuse, se va afișa utilizatorilor straturile create, în care lista lor este afișată în bara laterală din partea stângă. Instrumentul va evidenția, de asemenea, lucrurile din scena 3D, iar făcând clic pe straturi le va oferi utilizatorilor informații valoroase despre ele, cum ar fi dimensiunea.

„Ca dezvoltator web, poate fi foarte util să știi dacă o parte a paginii pe care intenționați să o animați se află într-adevăr în propriul strat”, adaugă el. „Dacă este, atunci poți fi sigur că în timp ce animația este redată, restul paginii nu va trebui să fie revopsit. Dar este la fel de important să verificați dacă nu creați accidental prea multe straturi, deoarece fiecare are nevoie de memorie.”