Microsoft, 3D 보기 도구에 합성 레이어 탭 추가

Microsoft는 새로운 기능을 웹 개발자에게 주입하여 웹 개발자를 놀라게 합니다. 3D 보기 도구, 개발 도구(개발 도구)의 일부입니다. 화요일에 발표된 합성 레이어 탭이라는 기능은 불필요한 스크롤바, z-인덱스 스택 문제 및 DOM 복잡성과 같은 일반적인 웹 개발 문제를 해결하는 데 사용되는 3D 보기 도구의 다른 도구와 결합됩니다.

합성 레이어 기능은 웹 페이지를 적절한 수의 레이어로 분할하기 위한 것입니다. 마이크로 소프트 에지 수석 제품 관리자 패트릭 브로셋 구성 요소가 나머지와 독립적으로 애니메이션되거나 변경될 때 유용할 것이라고 말합니다. Microsoft Edge DevTools에는 이전에 동일한 기능을 제공하는 별도의 레이어 도구가 있었습니다. 그러나 회사는 패널을 제거하기로 결정했고 결과적으로 3D View 도구와 병합되었습니다.

Brosset은 새 기능의 출시를 알리는 블로그 게시물에서 상위 수준에서 브라우저 렌더링 엔진의 활동에 대해 논의하여 레이어가 얼마나 중요한지와 기본적으로 웹에서 어떻게 발생하는지 자세히 설명합니다. 그에 따르면 브라우저 엔진은 일련의 단계를 따라 HTML 및 CSS에서 화면의 픽셀로 진행합니다. 이러한 절차에는 HTML 코드 구문 분석 및 DOM 트리 생성, CSS 코드 구문 분석 및 스타일 및 레이아웃 정보 획득, 새 트리 구조 생성, 페이지를 화면에 페인팅이 포함됩니다.

"이 마지막 단계에서 엔진은 페이지를 한 번에 칠하거나 여러 레이어로 나누어 개별적으로 칠한 다음 최종 이미지를 구성하기로 결정할 수 있습니다."라고 Brosset은 말합니다. “엔진이 별도의 레이어를 생성하도록 결정하는 특정 CSS 속성과 HTML 요소가 있습니다. 예를 들어 3D 변형 속성이나 will-change 속성을 사용하면 엔진이 레이어를 생성합니다. 이렇게 하면 이러한 레이어의 콘텐츠가 변경될 때 엔진이 전체 뷰포트가 아니라 이러한 개별 레이어만 다시 칠하면 됩니다."

합성된 레이어 탭을 클릭하면 생성된 레이어가 사용자에게 표시되며 왼쪽 사이드바에 목록이 표시됩니다. 이 도구는 또한 3D 장면의 항목을 강조 표시하고 레이어를 클릭하면 크기와 같은 중요한 정보를 사용자에게 제공합니다.

"웹 개발자로서 애니메이션을 적용하려는 페이지의 일부가 실제로 자체 레이어에 있는지 아는 것은 매우 유용할 수 있습니다."라고 그는 덧붙입니다. “그렇다면 애니메이션이 재생되는 동안 페이지의 나머지 부분도 다시 칠할 필요가 없다는 것을 확신할 수 있습니다. 그러나 각 레이어에 메모리가 필요하므로 실수로 레이어를 너무 많이 생성하지 않았는지 확인하는 것도 마찬가지로 중요합니다.”