Microsoft ajoute un onglet Couches composites dans l’outil Vue 3D
Microsoft surprend les développeurs web avec une nouvelle fonctionnalité injectée dans son Outil Vue 3D, qui fait partie des outils de développement (outils de développement). Annoncée mardi, la fonctionnalité appelée onglet Couches composites rejoindra d’autres outils des outils de vue 3D utilisés pour résoudre les problèmes de développement Web habituels, tels que les barres de défilement inutiles, les problèmes d’empilement d’index z et la complexité du DOM.
La fonctionnalité de couches composites est destinée à fractionner la page Web en le bon nombre de couches. Bord Microsoft Chef de produit sénior Patrick Brossette indique que cela sera utile lorsque les composants sont animés ou changent indépendamment du reste. On peut rappeler que Microsoft Edge DevTools disposait auparavant d’un outil Layers distinct offrant les mêmes fonctionnalités. Cependant, la société a décidé de supprimer le panneau pour cela, ce qui a entraîné sa fusion avec l’outil de vue 3D.
Dans un article de blog annonçant l’arrivée de la nouvelle fonctionnalité, Brosset détaille également l’importance des couches et comment elles se produisent essentiellement sur le Web en discutant de l’activité des moteurs de rendu des navigateurs à un niveau élevé. Selon lui, un moteur de navigateur suit une série d’étapes pour passer du HTML et du CSS aux pixels d’un écran. Ces procédures incluent l’analyse du code HTML et la création de l’arborescence DOM, l’analyse du code CSS et l’acquisition d’informations de style et de mise en page, la production d’une nouvelle arborescence et la peinture de la page à l’écran.
« Au cours de cette dernière étape, le moteur peut décider de peindre la page en une seule fois, ou de la diviser en plusieurs couches, de les peindre individuellement, puis de composer l’image finale à partir de celles-ci », note Brosset. « Il existe des propriétés CSS et des éléments HTML spécifiques qui font que le moteur décide de créer un calque séparé. Par exemple, l’utilisation d’une propriété de transformation 3D ou de la propriété will-change oblige le moteur à créer des calques. De cette façon, lorsque le contenu de ces calques change, le moteur n’a qu’à repeindre ces calques individuels et non la fenêtre d’affichage entière.
Cliquer sur l’onglet Couches composites montrera aux utilisateurs les couches créées, dans lesquelles leur liste est affichée dans la barre latérale sur le côté gauche. L’outil mettra également en évidence les éléments de la scène 3D, et cliquer sur les calques donnera aux utilisateurs des informations précieuses à leur sujet, telles que la taille.
« En tant que développeur web, il peut être très utile de savoir si une partie de la page que vous avez l’intention d’animer se trouve bien dans son propre calque », ajoute-t-il. « Si c’est le cas, vous pouvez être sûr que pendant la lecture de l’animation, le reste de la page n’aura pas besoin d’être repeint également. Mais il est tout aussi important de vérifier que vous ne créez pas accidentellement trop de calques, car chacun a besoin de mémoire.
