Microsoft adds Composited Layers tab in 3D View tool

Microsoft surprises web developers with a new feature injected into its 3D View tool, which is part of the Development Tools (Dev Tools). Announced on Tuesday, the feature called Composited Layers tab will join other tools of 3D View tools used for addressing usual web development problems, like unnecessary scrollbars, z-index stacking issues, and DOM complexity.

The Composited Layers feature is meant to fractionate the web page into the right number of layers. Microsoft Edge Senior Product Manager Patrick Brosset says it will be useful when the components are animated or changing independently of the rest. It can be recalled that Microsoft Edge DevTools previously had a separate Layers tool offering the same functionality. However, the company decided to remove the panel for it, resulting in its merging with the 3D View tool.

In a blog post announcing the arrival of the new feature, Brosset also details how important the layers are and how they basically happen on the web by discussing the activity of browser rendering engines at a high level. According to him, a browser engine follows a series of steps to proceed from HTML and CSS to pixels on a screen. These procedures include parsing the HTML code and creating the DOM tree, parsing CSS code and acquiring style and layout information, producing a new tree structure, and painting the page to the screen.

“During this last step, the engine may decide to paint the page in one go, or to divide it into multiple layers, paint them individually, and then compose the final image from them,” notes Brosset. “There are specific CSS properties and HTML elements that make the engine decide to create a separate layer. For example, using a 3D transform property or the will-change property makes the engine create layers. This way, when content in these layers change, the engine only has to re-paint these individual layers and not the entire viewport.”

Clicking the Composited Layers tab will show the users the layers created, wherein their list is displayed in the sidebar on the left-hand side. The tool will also highlight the things in the 3D scene, and clicking the layers will give users valuable information about them, such as size.

“As a web developer, it can be very useful to know if a part of the page that you intend to animate is, indeed, in its own layer,” he adds. “If it is, then you can be sure that while the animation is playing, the rest of the page won’t need to be repainted too. But it’s equally important to check that you aren’t accidentally creating too many layers either, as each one needs memory.”