Microsoft fügt die Registerkarte Composited Layers im 3D-Ansichtstool hinzu

Microsoft überrascht Webentwickler mit einer neuen Funktion, die in seine integriert ist Werkzeug 3D-Ansicht, das Teil der Entwicklungstools (Dev Tools) ist. Die am Dienstag angekündigte Funktion namens Composited Layers Tab wird sich anderen Werkzeugen der 3D-Ansichtswerkzeuge anschließen, die zur Behebung üblicher Webentwicklungsprobleme verwendet werden, wie unnötige Bildlaufleisten, Z-Index-Stacking-Probleme und DOM-Komplexität.

Die Funktion Composited Layers soll die Webseite in die richtige Anzahl von Layern unterteilen. Microsoft Edge Senior Product Manager Patrick Brosset sagt, dass es nützlich sein wird, wenn die Komponenten animiert sind oder sich unabhängig vom Rest ändern. Es sei daran erinnert, dass Microsoft Edge DevTools zuvor über ein separates Layers-Tool verfügte, das dieselbe Funktionalität bietet. Das Unternehmen beschloss jedoch, das Panel dafür zu entfernen, was zu einer Verschmelzung mit dem 3D-View-Tool führte.

In einem Blogbeitrag, in dem die Einführung der neuen Funktion angekündigt wird, erläutert Brosset auch, wie wichtig die Ebenen sind und wie sie im Grunde im Web ablaufen, indem er die Aktivität von Browser-Rendering-Engines auf hoher Ebene diskutiert. Ihm zufolge folgt eine Browser-Engine einer Reihe von Schritten, um von HTML und CSS zu Pixeln auf einem Bildschirm zu gelangen. Diese Verfahren umfassen das Parsen des HTML-Codes und das Erstellen des DOM-Baums, das Parsen des CSS-Codes und das Erfassen von Stil- und Layoutinformationen, das Erstellen einer neuen Baumstruktur und das Zeichnen der Seite auf dem Bildschirm.

„Während dieses letzten Schritts kann die Engine entscheiden, die Seite auf einmal zu malen oder sie in mehrere Ebenen aufzuteilen, sie einzeln zu malen und dann das endgültige Bild daraus zusammenzusetzen“, bemerkt Brosset. „Es gibt bestimmte CSS-Eigenschaften und HTML-Elemente, die die Engine veranlassen, eine separate Ebene zu erstellen. Wenn Sie beispielsweise eine 3D-Transformationseigenschaft oder die Will-Change-Eigenschaft verwenden, erstellt die Engine Ebenen. Wenn sich Inhalte in diesen Ebenen ändern, muss die Engine auf diese Weise nur diese einzelnen Ebenen und nicht den gesamten Darstellungsbereich neu zeichnen.“

Durch Klicken auf die Registerkarte Composited Layers werden den Benutzern die erstellten Layer angezeigt, wobei ihre Liste in der Seitenleiste auf der linken Seite angezeigt wird. Das Tool hebt auch die Dinge in der 3D-Szene hervor, und das Klicken auf die Ebenen gibt den Benutzern wertvolle Informationen darüber, wie z. B. die Größe.

„Als Webentwickler kann es sehr nützlich sein zu wissen, ob sich ein Teil der Seite, den Sie animieren möchten, tatsächlich in einer eigenen Ebene befindet“, fügt er hinzu. „Wenn dies der Fall ist, können Sie sicher sein, dass der Rest der Seite nicht neu gezeichnet werden muss, während die Animation abgespielt wird. Aber es ist ebenso wichtig zu überprüfen, dass Sie nicht versehentlich zu viele Ebenen erstellen, da jede Speicher benötigt.“