微軟在 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 場景中的事物，單擊圖層將為用戶提供有關它們的有價值信息，例如大小。

“作為一名網絡開發人員，了解您打算製作動畫的頁面的一部分是否確實在其自己的層中是非常有用的，”他補充道。 “如果是這樣，那麼您可以確定在播放動畫時，頁面的其餘部分也不需要重新繪製。 但同樣重要的是要檢查您是否不會意外創建太多層，因為每個層都需要內存。”