Microsoft adiciona a guia Composited Layers na ferramenta 3D View

Microsoft surpreende desenvolvedores web com novo recurso injetado em seu Ferramenta de visualização 3D, que faz parte das Ferramentas de Desenvolvimento (Dev Tools). Anunciado na terça-feira, o recurso chamado guia Composited Layers se juntará a outras ferramentas de ferramentas de visualização 3D usadas para resolver problemas comuns de desenvolvimento da Web, como barras de rolagem desnecessárias, problemas de empilhamento de z-index e complexidade do DOM.

O recurso Camadas Compostas destina-se a fracionar a página da Web no número certo de camadas. Microsoft Edge Senior Product Manager Patrick Brosset diz que será útil quando os componentes forem animados ou alterados independentemente do resto. Recorde-se que o Microsoft Edge DevTools tinha anteriormente uma ferramenta Layers separada que oferecia a mesma funcionalidade. No entanto, a empresa decidiu remover o painel para ele, resultando em sua fusão com a ferramenta 3D View.

Em uma postagem no blog anunciando a chegada do novo recurso, Brosset também detalha a importância das camadas e como elas acontecem basicamente na web, discutindo a atividade dos mecanismos de renderização do navegador em alto nível. Segundo ele, um mecanismo de navegador segue uma série de etapas para passar de HTML e CSS a pixels em uma tela. Esses procedimentos incluem analisar o código HTML e criar a árvore DOM, analisar o código CSS e adquirir informações de estilo e layout, produzir uma nova estrutura de árvore e pintar a página na tela.

“Durante esta última etapa, o mecanismo pode decidir pintar a página de uma só vez ou dividi-la em várias camadas, pintá-las individualmente e depois compor a imagem final a partir delas”, observa Brosset. “Existem propriedades CSS e elementos HTML específicos que fazem com que o mecanismo decida criar uma camada separada. Por exemplo, usar uma propriedade de transformação 3D ou a propriedade will-change faz com que o mecanismo crie camadas. Dessa forma, quando o conteúdo dessas camadas muda, o mecanismo só precisa repintar essas camadas individuais e não toda a janela de visualização.”

Clicar na guia Camadas Compostas mostrará aos usuários as camadas criadas, em que sua lista é exibida na barra lateral do lado esquerdo. A ferramenta também destacará as coisas na cena 3D, e clicar nas camadas fornecerá aos usuários informações valiosas sobre elas, como tamanho.

“Como desenvolvedor web, pode ser muito útil saber se uma parte da página que você pretende animar está, de fato, em sua própria camada”, acrescenta. “Se for, então você pode ter certeza de que enquanto a animação estiver sendo reproduzida, o resto da página não precisará ser repintado também. Mas é igualmente importante verificar se você também não está criando acidentalmente muitas camadas, pois cada uma precisa de memória.”