Microsoft přidává kartu Složené vrstvy do nástroje 3D zobrazení

Microsoft překvapuje webové vývojáře novou funkcí, která je do něj vložena Nástroj 3D zobrazení, který je součástí Vývojových nástrojů (Dev Tools). Funkce nazvaná karta Composite Layers, oznámená v úterý, se připojí k dalším nástrojům nástrojů 3D View, které se používají k řešení obvyklých problémů s vývojem webu, jako jsou zbytečné posuvníky, problémy se stohováním z-indexu a složitost DOM.

Funkce Composite Layers je určena k rozdělení webové stránky do správného počtu vrstev. Microsoft hran Vedoucí produktový manažer Patrik Brosset říká, že to bude užitečné, když se komponenty animují nebo se mění nezávisle na zbytku. Lze připomenout, že Microsoft Edge DevTools měl dříve samostatný nástroj Layers nabízející stejnou funkcionalitu. Společnost se však rozhodla panel pro něj odstranit, což vedlo k jeho sloučení s nástrojem 3D View.

V příspěvku na blogu oznamujícím příchod nové funkce Brosset také podrobně popisuje, jak důležité jsou vrstvy a jak k nim v podstatě dochází na webu, a to tím, že na vysoké úrovni diskutuje o aktivitě vykreslovacích modulů prohlížeče. Prohlížeč se podle něj řídí řadou kroků, jak postupovat od HTML a CSS k pixelům na obrazovce. Tyto postupy zahrnují analýzu kódu HTML a vytvoření stromu DOM, analýzu kódu CSS a získání informací o stylu a rozvržení, vytvoření nové stromové struktury a vykreslení stránky na obrazovku.

„Během tohoto posledního kroku se engine může rozhodnout namalovat stránku najednou nebo ji rozdělit do více vrstev, vybarvit je jednotlivě a poté z nich složit konečný obrázek,“ poznamenává Brosset. „Existují specifické vlastnosti CSS a prvky HTML, kvůli kterým se engine rozhodne vytvořit samostatnou vrstvu. Například použití vlastnosti 3D transformace nebo vlastnosti will-change způsobí, že engine vytvoří vrstvy. Tímto způsobem, když se obsah v těchto vrstvách změní, engine musí překreslit pouze tyto jednotlivé vrstvy a ne celý výřez.“

Kliknutím na kartu Složené vrstvy zobrazíte uživatelům vytvořené vrstvy, přičemž jejich seznam je zobrazen na postranním panelu na levé straně. Nástroj také zvýrazní věci ve 3D scéně a kliknutím na vrstvy o nich uživatelé získají cenné informace, jako je velikost.

„Jako webový vývojář může být velmi užitečné vědět, zda je část stránky, kterou chcete animovat, skutečně ve své vlastní vrstvě,“ dodává. „Pokud ano, můžete si být jisti, že během přehrávání animace nebude nutné překreslovat ani zbytek stránky. Stejně důležité je ale zkontrolovat, zda nevytváříte náhodou příliš mnoho vrstev, protože každá z nich potřebuje paměť.“