Microsoft lägger till fliken Sammansatta lager i verktyget 3D View

Microsoft överraskar webbutvecklare med en ny funktion injicerad i dess 3D View-verktyg, som är en del av utvecklingsverktygen (Dev Tools). Tillkännagav på tisdagen, funktionen som heter Composited Layers-fliken kommer att ansluta sig till andra verktyg för 3D View-verktyg som används för att lösa vanliga webbutvecklingsproblem, som onödiga rullningslister, z-index-stackningsproblem och DOM-komplexitet.

Funktionen för sammansatta lager är avsedd att dela upp webbsidan i rätt antal lager. Microsoft Edge Senior Product Manager Patrick Brosset säger att det kommer att vara användbart när komponenterna är animerade eller ändras oberoende av resten. Man kan komma ihåg att Microsoft Edge DevTools tidigare hade ett separat lagerverktyg som erbjuder samma funktionalitet. Företaget bestämde sig dock för att ta bort panelen för den, vilket resulterade i att den slogs samman med verktyget 3D View.

I ett blogginlägg som tillkännager ankomsten av den nya funktionen, beskriver Brosset också hur viktiga lagren är och hur de i princip sker på webben genom att diskutera aktiviteten hos webbläsarrenderingsmotorer på hög nivå. Enligt honom följer en webbläsarmotor en rad steg för att gå vidare från HTML och CSS till pixlar på en skärm. Dessa procedurer inkluderar att analysera HTML-koden och skapa DOM-trädet, analysera CSS-kod och skaffa stil- och layoutinformation, skapa en ny trädstruktur och måla sidan på skärmen.

"Under det här sista steget kan motorn bestämma sig för att måla sidan på en gång, eller att dela upp den i flera lager, måla dem individuellt och sedan komponera den slutliga bilden från dem", konstaterar Brosset. "Det finns specifika CSS-egenskaper och HTML-element som gör att motorn väljer att skapa ett separat lager. Till exempel, genom att använda en 3D-transformeringsegenskap eller egenskapen kommer att förändras får motorn att skapa lager. På så sätt, när innehållet i dessa lager ändras, behöver motorn bara måla om dessa individuella lager och inte hela visningsporten."

Om du klickar på fliken Sammansatta lager visas de skapade lagren för användarna, där deras lista visas i sidofältet till vänster. Verktyget kommer också att markera sakerna i 3D-scenen, och genom att klicka på lagren får användarna värdefull information om dem, till exempel storlek.

"Som webbutvecklare kan det vara mycket användbart att veta om en del av sidan som du tänker animera verkligen är i sitt eget lager," tillägger han. "Om det är det kan du vara säker på att medan animationen spelas behöver inte resten av sidan målas om också. Men det är lika viktigt att kontrollera att du inte skapar för många lager av misstag, eftersom var och en behöver minne.”