Microsoft adds composite layer tab to 3D View tool

The Composite Layers tab in the 3D View tool allows you to view the layers you created.

Microsoft has surprised web developers by injecting a new feature into its 3D View tool , this tool is part of the development tools (Dev Tools). Announced on Tuesday, a feature called the Composited Layers tab will join other tools in the 3D View tool to solve common web development problems like unnecessary scrollbars, z-index stacking issues and DOM complexity.

The Composite Layers feature is designed to separate web pages into the correct number of layers. Patrick Brosset, senior product manager for Microsoft Edge, said it's useful when a component animates or changes independently of other components. It can be recalled that Microsoft Edge DevTools previously had a separate layer tool that provided the same functionality. However, the company decided to remove the panel from it, thus merging it with the 3D view tool.

In the blog post announcing the arrival of the new feature, Brosset also detailed the importance of these layers and their basic role on the web, and discussed the activity of the browser rendering engine at a high level. According to him, the browser engine follows a series of steps, starting from HTML and CSS to the pixels on the screen. These processes include parsing HTML code and creating a DOM tree, parsing CSS code and obtaining style and layout information, generating new tree structures, and drawing the page to the screen.

"In the final step, the engine may decide to draw the page all at once, or split it into multiple layers, draw them separately, and then composite the final image from them," Brosset notes. "There are specific CSS properties and HTML elements that cause the engine to decide to create a separate layer. For example, using the 3D transform property or the will-change property causes the engine to create layers. This way, when the content in these layers changes, the engine Simply repaint these individual layers rather than the entire viewport."

Clicking on the composition layers tab will show the user the created layers with their list displayed on the left side column. The tool will also highlight things in the 3D scene, and clicking on the layers will provide the user with valuable information about them, such as size.

"As a web developer, it's very useful to know whether the part of the page you intend to animate is actually in its own layer," he adds. "If so, then you can be sure that the rest of the page won't need to be redrawn while the animation is playing. But it's also important to check that you don't accidentally create too many layers, as each layer requires memory."

The above is the detailed content of Microsoft adds composite layer tab to 3D View tool. For more information, please follow other related articles on the PHP Chinese website!