微软在其3D视图工具中注入了一个新的功能，让网络开发者感到惊讶，该工具是开发工具（Dev Tools）的一部分。周二公布的这项名为Composited Layers tab的功能将加入3D View工具的其他工具，用于解决通常的网络开发问题，如不必要的滚动条、Z-index堆叠问题和DOM复杂性。

参考链接：https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/3d-view/

合成图层功能是为了将网页分割成适当数量的图层。微软Edge高级产品经理帕特里克-布罗塞特（Patrick Brosset）说，当组件是独立于其他部分的动画或变化时，它将非常有用。可以回顾一下，Microsoft Edge DevTools以前有一个单独的Layers工具，提供同样的功能。然而，该公司决定删除它的面板，导致它与3D视图工具合并。

参考链接（需科学上网）：https://twitter.com/patrickbrosset

三星Galaxy Z Fold 3的完整规格公布

在宣布新功能到来的博文中，Brosset还详细介绍了图层有多重要，以及它们基本上是如何在网络上发生的，他从高层次上讨论了浏览器渲染引擎的活动。据他说，浏览器引擎遵循一系列步骤，从HTML和CSS进行到屏幕上的像素。这些程序包括解析HTML代码并创建DOM树，解析CSS代码并获取样式和布局信息，产生一个新的树状结构，并将页面绘制到屏幕上。

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

点击合成图层标签将向用户展示所创建的图层，其中它们的列表显示在左侧的侧边栏中。该工具还将突出显示3D场景中的事物，点击图层将为用户提供关于它们的有价值的信息，如尺寸。

“他补充说：”作为一个网页开发者，知道你打算制作动画的网页的某个部分是否确实在它自己的图层中，可能非常有用。他补充说：”如果是，那么你就可以确保在播放动画的时候，页面的其他部分不需要重新绘制了。但同样重要的是，要检查你是否意外地创建了太多的层，因为每个层都需要内存”。