Microsoft agrega la pestaña Capas compuestas en la herramienta Vista 3D

Microsoft sorprende a los desarrolladores web con una nueva función inyectada en su Herramienta Vista 3D, que forma parte de las Herramientas de desarrollo (Dev Tools). Anunciada el martes, la función llamada pestaña Capas compuestas se unirá a otras herramientas de Vista 3D utilizadas para abordar los problemas habituales de desarrollo web, como barras de desplazamiento innecesarias, problemas de apilamiento de índice z y complejidad DOM.

La función Capas compuestas está destinada a fraccionar la página web en el número correcto de capas. Microsoft Edge Gerente Senior de Producto Patricio Brosset dice que será útil cuando los componentes estén animados o cambien independientemente del resto. Se puede recordar que Microsoft Edge DevTools anteriormente tenía una herramienta de capas separada que ofrecía la misma funcionalidad. Sin embargo, la empresa decidió quitarle el panel, lo que resultó en su fusión con la herramienta Vista 3D.

En una publicación de blog que anuncia la llegada de la nueva función, Brosset también detalla la importancia de las capas y cómo ocurren básicamente en la web al analizar la actividad de los motores de renderizado del navegador a un alto nivel. Según él, un motor de navegador sigue una serie de pasos para pasar de HTML y CSS a píxeles en una pantalla. Estos procedimientos incluyen analizar el código HTML y crear el árbol DOM, analizar el código CSS y adquirir información de estilo y diseño, producir una nueva estructura de árbol y pintar la página en la pantalla.

“Durante este último paso, el motor puede decidir pintar la página de una sola vez o dividirla en varias capas, pintarlas individualmente y luego componer la imagen final a partir de ellas”, señala Brosset. “Hay propiedades CSS específicas y elementos HTML que hacen que el motor decida crear una capa separada. Por ejemplo, el uso de una propiedad de transformación 3D o la propiedad will-change hace que el motor cree capas. De esta forma, cuando cambia el contenido de estas capas, el motor solo tiene que volver a pintar estas capas individuales y no toda la ventana gráfica”.

Al hacer clic en la pestaña Capas compuestas, se mostrarán a los usuarios las capas creadas, y su lista se muestra en la barra lateral del lado izquierdo. La herramienta también resaltará las cosas en la escena 3D, y al hacer clic en las capas, los usuarios obtendrán información valiosa sobre ellas, como el tamaño.

“Como desarrollador web, puede ser muy útil saber si una parte de la página que desea animar está, de hecho, en su propia capa”, agrega. “Si es así, puede estar seguro de que mientras se reproduce la animación, no será necesario volver a pintar el resto de la página. Pero es igualmente importante verificar que tampoco estés creando demasiadas capas accidentalmente, ya que cada una necesita memoria”.