search
HomeCommon ProblemMicrosoft adds composite layer tab to 3D View tool

微软在 3D 视图工具中添加了复合层选项卡
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!

Statement
This article is reproduced at:云东方. If there is any infringement, please contact admin@php.cn delete
Microsoft Teams 不显示图像?怎么修Microsoft Teams 不显示图像?怎么修Apr 16, 2023 am 10:28 AM

解决 Microsoft Teams 无法加载或显示图像的问题的 10 种方法如果您收到的图像无法在 Microsoft Teams 中加载,并且您看到的只是一个图像图标,而不是实际图像应加载到的位置,那么以下修复程序应该可以帮助您解决此问题。修复 #1:检查您的互联网连接当您遇到无法在 Microsoft Teams 上加载图像时要检查的第一件事是查看您的计算机是否已连接到有

属性中没有位置选项卡:如何启用它属性中没有位置选项卡:如何启用它Apr 13, 2023 pm 11:16 PM

文件夹属性为用户提供详细信息,例如创建日期、文件夹名称、大小等。但是,有时您可能会在Windows文件夹的属性中遇到“位置”选项卡。因此,我们将引导您完成故障排除和重新启用它的步骤。或者,您可以查看我们关于修复 Windows 11 上的文件夹访问被拒绝问题的详细指南。为什么在文件夹属性中找不到位置选项卡?有几个因素可能导致 Windows 11 上文件夹属性中缺少位置选项卡。最值得注意的是:文件夹不支持移动 – 有些文件夹支持移动到另一个位置,而有些则不支持。默认情况下,支持从一个位置移动到另

如果设备管理器中缺少电源管理选项卡,则进行 7 个修复如果设备管理器中缺少电源管理选项卡,则进行 7 个修复Apr 14, 2023 pm 07:04 PM

设备管理器是Windows中列出所有连接设备的实用程序。此外,您可以在此处识别有问题的硬件并对其进行故障排除,甚至可以更改电源设置。但是,对于某些用户,设备管理器中缺少电源管理选项卡。这可能由于多种原因而发生,并且由于无法进行更改而可能会影响您的体验。在这种情况下,您将无法配置系统如何控制设备的电源以及设备是否可以唤醒PC。因此,请阅读以下部分以了解如果Windows11的设备管理器中缺少电源管理选项卡该怎么办。如果设备管理器中缺少电源管理选项卡,我该怎么办?1.更新Windows按Wind

如何解决 Windows 10 中的 Rundll32.exe 错误如何解决 Windows 10 中的 Rundll32.exe 错误Apr 14, 2023 pm 04:25 PM

Rundll32.exe文件是一个系统进程文件,与Windows10的功能相关。它使用DLL(动态链接库)库,该库包含在Windows系统上一次运行的多个程序重复使用的代码。代码的重复使用有时可能会导致错误。此问题的主要原因是删除了rundll32.exe文件、损坏的DLL文件、Windows注册表中不正确的DLL条目等。在本文中,我们将了解发生了哪些不同类型的rundll32.exe错误以及如何处理解决这些问题。用户面临的不同Rundll32.exe错误发生run

Android 上的 Chrome 现在可让您一次恢复所有关闭的标签页Android 上的 Chrome 现在可让您一次恢复所有关闭的标签页Apr 15, 2023 pm 03:25 PM

Android上的Chrome用户现在可以通过转到“最近的标签和最近关闭的”部分轻松地批量恢复最近关闭的 标签和标签 组。该功能现在可用。以下是如何轻松启用和恢复所有关闭的选项卡的方法。桌面上的 Chrome 可以更轻松地恢复旧选项卡,因为它会在主菜单的历史记录子菜单中的最近关闭下显示它们。您不仅可以检索包含选项卡的窗口,还可以检索选项卡组。这是从以前的 session 中调用

杜比全景声在 Windows 11 中不起作用?立即修复杜比全景声在 Windows 11 中不起作用?立即修复Apr 16, 2023 pm 09:31 PM

如果杜比全景声在Windows11中无法运行,我该怎么办?1.运行内置音频疑难解答按Windows+I启动“设置”应用程序,然后单击“系统”选项卡右侧的“疑难解答”。接下来,单击“其他疑难解答”。找到并单击播放音频疑难解答旁边的运行按钮。等待疑难解答程序检测到问题,然后按照屏幕上的说明修复错误。每当处理Windows中的错误时,建议您首先为其运行相关的内置疑难解答程序(如果存在)。众所周知,这些可以以最少的努力解决大量问题。2.更新Windows11按Windows+I启动“设置”应用,然后

如何在 Microsoft Excel 中显示开发人员选项卡如何在 Microsoft Excel 中显示开发人员选项卡Apr 14, 2023 pm 02:10 PM

如果您需要录制或运行宏、插入 Visual Basic 表单或 ActiveX 控件或在 MS Excel 中导入/导出 XML 文件,则需要 Excel 中的“开发人员”选项卡以便轻松访问。但是,默认情况下,此开发人员选项卡不会显示,但您可以通过在 Excel 选项中启用它来将其添加到功能区。如果您正在使用宏和 VBA 并希望从功能区轻松访问它们,请继续阅读这篇文章。在 Excel 中启用开发人员选项卡的步骤1. 启动MS Excel应用程序。右键单击顶部功能区选项卡之一的任意位置,然后在出现

如何在 Microsoft Word 中写分数如何在 Microsoft Word 中写分数Apr 13, 2023 pm 02:04 PM

我们都知道 Microsoft Word 非常灵活,并且具有许多功能。最重要的是我们知道如何充分利用 Microsoft Word 提供的功能。其中一个令人惊奇的功能是在您的 Word 文档中插入一个分数值。许多地方都使用分数。但是当我们在 Word 文档中插入分数时,它的格式并不总是像分数一样。在本文中,我们通过一些非常简单的步骤解释了如何轻松地将格式良好的分数数字插入到 Microsoft Word 文档中。继续阅读,了解如何轻松掌握这个超级方便的 Word 技巧。在 Microsoft W

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool