微软在 3D 视图工具中添加了复合层选项卡

微软向 Web 开发人员注入了一项新功能，令其感到惊讶 3D 视图工具，它是开发工具（Dev Tools）的一部分。 周二宣布，名为 Composited Layers 选项卡的功能将加入 3D 视图工具的其他工具，用于解决常见的 Web 开发问题，如不必要的滚动条、z-index 堆叠问题和 DOM 复杂性。

复合图层功能旨在将网页分成正确数量的图层。 微软边缘 高级产品经理 帕特里克·布罗塞特 表示当组件动画或独立于其余部分更改时，它将很有用。 可以回想一下，Microsoft Edge DevTools 之前有一个单独的图层工具提供相同的功能。 然而，该公司决定为其移除面板，从而将其与 3D 视图工具合并。

在宣布新功能到来的博客文章中，Brosset 还详细介绍了这些层的重要性以及它们在 Web 上的基本情况，并从高层次讨论了浏览器渲染引擎的活动。 据他介绍，浏览器引擎遵循一系列步骤，从 HTML 和 CSS 到屏幕上的像素。 这些过程包括解析 HTML 代码和创建 DOM 树、解析 CSS 代码并获取样式和布局信息、生成新的树结构以及将页面绘制到屏幕上。

“在这最后一步中，引擎可能决定一次性绘制页面，或者将其分成多个图层，单独绘制，然后从中合成最终图像，”Brosset 指出。 “有特定的 CSS 属性和 HTML 元素使引擎决定创建一个单独的层。 例如，使用 3D 变换属性或 will-change 属性会使引擎创建图层。 这样，当这些图层中的内容发生变化时，引擎只需重新绘制这些单独的图层，而不是整个视口。”

单击合成图层选项卡将向用户显示创建的图层，其中他们的列表显示在左侧的侧边栏中。 该工具还将突出显示 3D 场景中的事物，单击图层将为用户提供有关它们的有价值信息，例如大小。

“作为一名网络开发人员，了解您打算制作动画的页面的一部分是否确实在其自己的层中是非常有用的，”他补充道。 “如果是这样，那么您可以确定在播放动画时，页面的其余部分也不需要重新绘制。 但同样重要的是要检查您是否不会意外创建太多层，因为每个层都需要内存。”