Microsoft ajoute un onglet de couche composite à l'outil Vue 3D

L'onglet Calques de composition de l'outil Vue 3D vous permet de visualiser les calques que vous avez créés.

Microsoft a surpris les développeurs web en injectant une nouvelle fonctionnalité dans son outil 3D View , qui fait partie de Dev Tools. Annoncée mardi, une fonctionnalité appelée l'onglet Couches composites rejoindra d'autres outils de l'outil Vue 3D pour résoudre les problèmes courants de développement Web tels que les barres de défilement inutiles, les problèmes d'empilement d'index z et la complexité du DOM.

La fonctionnalité Couches composites est conçue pour séparer les pages Web en le nombre correct de couches. Patrick Brosset, chef de produit senior pour Microsoft Edge, a déclaré que cela est utile lorsqu'un composant s'anime ou change indépendamment des autres composants. On peut rappeler que Microsoft Edge DevTools disposait auparavant d'un outil de couche distinct offrant les mêmes fonctionnalités. Cependant, l'entreprise a décidé d'en retirer le panneau, le fusionnant ainsi avec l'outil de visualisation 3D.

Dans un article de blog annonçant l'arrivée de la nouvelle fonctionnalité, Brosset détaille également l'importance de ces couches et leur rôle fondamental sur le web, évoquant l'activité des moteurs de rendu des navigateurs à haut niveau. Selon lui, le moteur du navigateur suit une série d'étapes, allant du HTML et CSS jusqu'aux pixels de l'écran. Ces processus incluent l'analyse du code HTML et la création d'une arborescence DOM, l'analyse du code CSS et l'obtention d'informations de style et de mise en page, la génération de nouvelles structures arborescentes et le dessin de la page à l'écran.

« Dans l'étape finale, le moteur peut décider de dessiner la page en une seule fois, ou de la diviser en plusieurs calques, de les dessiner séparément, puis de composer l'image finale à partir d'eux », souligne Brosset. "Il existe des propriétés CSS et des éléments HTML spécifiques qui amènent le moteur à décider de créer un calque séparé. Par exemple, l'utilisation de la propriété de transformation 3D ou de la propriété will-change amène le moteur à créer des calques. De cette façon, lorsque le contenu de ces les calques changent, le moteur repeint simplement ces calques individuels au lieu de la fenêtre entière. "

Cliquer sur l'onglet des calques de composition montrera à l'utilisateur les calques créés avec leur liste affichée dans la barre latérale de gauche. L'outil mettra également en évidence les éléments de la scène 3D, et cliquer sur les calques fournira à l'utilisateur des informations précieuses à leur sujet, telles que leur taille.

« En tant que développeur web, il est très utile de savoir si la partie de la page que vous comptez animer se trouve réellement dans sa propre couche », ajoute-t-il. "Si tel est le cas, vous pouvez être sûr que le reste de la page n'aura pas besoin d'être redessiné pendant la lecture de l'animation. Mais il est également important de vérifier que vous ne créez pas accidentellement trop de calques, car chaque calque nécessite de la mémoire. .."

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!