Spoločnosť Microsoft pridáva kartu Zložené vrstvy do nástroja 3D View

Spoločnosť Microsoft prekvapuje webových vývojárov novou funkciou vloženou do svojej aplikácie Nástroj 3D zobrazenie, ktorý je súčasťou Vývojových nástrojov (Dev Tools). Funkcia s názvom Composite Layers tab, ktorá bola ohlásená v utorok, sa pripojí k ďalším nástrojom nástrojov 3D View, ktoré sa používajú na riešenie bežných problémov s vývojom webu, ako sú zbytočné posúvače, problémy so skladaním z-indexu a zložitosť DOM.

Funkcia Composite Layers je určená na rozdelenie webovej stránky do správneho počtu vrstiev. Microsoft hrán Senior Product Manager Patrik Brosset hovorí, že to bude užitočné, keď sa komponenty animujú alebo menia nezávisle od zvyšku. Možno pripomenúť, že Microsoft Edge DevTools mal predtým samostatný nástroj Layers ponúkajúci rovnakú funkčnosť. Spoločnosť sa však rozhodla panel pre neho odstrániť, výsledkom čoho bolo jeho zlúčenie s nástrojom 3D View.

V blogovom príspevku, ktorý oznamuje príchod novej funkcie, Brosset tiež podrobne popisuje, aké dôležité sú vrstvy a ako sa v podstate dejú na webe, pričom na vysokej úrovni diskutuje o činnosti vykresľovacích motorov prehliadača. Podľa neho motor prehliadača postupuje od HTML a CSS k pixelom na obrazovke pomocou série krokov. Tieto postupy zahŕňajú analýzu kódu HTML a vytvorenie stromu DOM, analýzu kódu CSS a získanie informácií o štýle a rozložení, vytvorenie novej stromovej štruktúry a vykreslenie stránky na obrazovku.

„Počas tohto posledného kroku sa nástroj môže rozhodnúť vymaľovať stránku jedným ťahom alebo ju rozdeliť do viacerých vrstiev, namaľovať ich jednotlivo a potom z nich zostaviť konečný obrázok,“ poznamenáva Brosset. „Existujú špecifické vlastnosti CSS a prvky HTML, vďaka ktorým sa engine rozhodne vytvoriť samostatnú vrstvu. Napríklad použitie vlastnosti 3D transform alebo vlastnosti will-change spôsobí, že engine vytvorí vrstvy. Týmto spôsobom, keď sa obsah v týchto vrstvách zmení, engine musí prekresliť iba tieto jednotlivé vrstvy a nie celý výrez.“

Kliknutím na kartu Zložené vrstvy sa používateľom zobrazia vytvorené vrstvy, pričom ich zoznam sa zobrazí na bočnom paneli na ľavej strane. Nástroj tiež zvýrazní veci v 3D scéne a kliknutím na vrstvy o nich získajú používatelia cenné informácie, napríklad veľkosť.

„Ako webový vývojár môže byť veľmi užitočné vedieť, či časť stránky, ktorú chcete animovať, je skutočne vo vlastnej vrstve,“ dodáva. „Ak áno, môžete si byť istí, že počas prehrávania animácie nebude potrebné prefarbovať ani zvyšok stránky. Rovnako dôležité je však skontrolovať, či náhodou nevytvárate príliš veľa vrstiev, pretože každá z nich potrebuje pamäť.“