Microsoft voegt tabblad Samengestelde lagen toe aan tool 3D-weergave

Microsoft verrast webontwikkelaars met een nieuwe functie die in zijn 3D-weergavetool, dat deel uitmaakt van de Development Tools (Dev Tools). Aangekondigd op dinsdag, zal de functie genaamd Composited Layers-tabblad zich voegen bij andere tools van 3D View-tools die worden gebruikt voor het oplossen van gebruikelijke webontwikkelingsproblemen, zoals onnodige schuifbalken, z-index stapelproblemen en DOM-complexiteit.

De functie Samengestelde lagen is bedoeld om de webpagina op te delen in het juiste aantal lagen. Microsoft Edge Senior Productmanager Patrick Broset zegt dat het nuttig zal zijn wanneer de componenten worden geanimeerd of onafhankelijk van de rest veranderen. Men herinnert zich dat Microsoft Edge DevTools eerder een aparte Layers-tool had die dezelfde functionaliteit bood. Het bedrijf besloot echter het paneel ervoor te verwijderen, wat resulteerde in een samenvoeging met de 3D View-tool.

In een blogpost waarin de komst van de nieuwe functie wordt aangekondigd, beschrijft Brosset ook hoe belangrijk de lagen zijn en hoe ze in feite op het web plaatsvinden door de activiteit van browserweergave-engines op een hoog niveau te bespreken. Volgens hem doorloopt een browser-engine een reeks stappen om van HTML en CSS naar pixels op een scherm te gaan. Deze procedures omvatten het ontleden van de HTML-code en het maken van de DOM-boom, het ontleden van CSS-code en het verkrijgen van stijl- en lay-outinformatie, het produceren van een nieuwe boomstructuur en het schilderen van de pagina op het scherm.

"Tijdens deze laatste stap kan de engine besluiten om de pagina in één keer te schilderen, of om deze in meerdere lagen te verdelen, ze afzonderlijk te schilderen en vervolgens de uiteindelijke afbeelding daaruit samen te stellen", merkt Brosset op. “Er zijn specifieke CSS-eigenschappen en HTML-elementen die de engine doen besluiten om een ​​aparte laag te maken. Als u bijvoorbeeld een eigenschap 3D-transformatie of de eigenschap will-change gebruikt, maakt de engine lagen. Op deze manier hoeft de engine, wanneer de inhoud in deze lagen verandert, alleen deze afzonderlijke lagen opnieuw te schilderen en niet de hele viewport.”

Als u op het tabblad Samengestelde lagen klikt, worden de gemaakte lagen weergegeven aan de gebruikers, waarbij hun lijst wordt weergegeven in de zijbalk aan de linkerkant. De tool zal ook de dingen in de 3D-scène markeren en door op de lagen te klikken, krijgen gebruikers waardevolle informatie over hen, zoals de grootte.

"Als webontwikkelaar kan het erg handig zijn om te weten of een deel van de pagina dat u wilt animeren inderdaad in een eigen laag staat", voegt hij eraan toe. “Als dat zo is, kun je er zeker van zijn dat terwijl de animatie wordt afgespeeld, de rest van de pagina ook niet opnieuw hoeft te worden geverfd. Maar het is net zo belangrijk om te controleren of je niet per ongeluk te veel lagen maakt, omdat elke laag geheugen nodig heeft.”