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

3D 보기 도구의 컴포지션 레이어 탭을 사용하면 생성한 레이어를 볼 수 있습니다.

Microsoft는 Dev Tools의 일부인 3D 보기 도구 에 새로운 기능을 삽입하여 웹 개발자를 놀라게 했습니다 . 화요일에 발표된 합성 레이어 탭이라는 기능은 3D 보기 도구의 다른 도구와 결합하여 불필요한 스크롤 막대, Z-인덱스 스태킹 문제 및 DOM 복잡성과 같은 일반적인 웹 개발 문제를 해결합니다.

복합 레이어 기능은 웹 페이지를 올바른 수의 레이어로 분리하도록 설계되었습니다. Microsoft Edge의 수석 제품 관리자인 Patrick Brosset은 구성 요소가 다른 구성 요소와 독립적으로 애니메이션을 적용하거나 변경될 때 유용하다고 말했습니다. Microsoft Edge DevTools에는 이전에 동일한 기능을 제공하는 별도의 계층 도구가 있었다는 점을 상기할 수 있습니다. 그러나 회사는 패널을 제거하여 3D 뷰 도구와 병합하기로 결정했습니다.

Brosset은 새로운 기능의 출시를 알리는 블로그 게시물에서 이러한 레이어의 중요성과 웹에서의 기본 역할을 자세히 설명하고 브라우저 렌더링 엔진의 활동을 높은 수준에서 논의합니다. 그에 따르면 브라우저 엔진은 HTML과 CSS에서 시작하여 화면의 픽셀에 이르기까지 일련의 단계를 따릅니다. 이러한 프로세스에는 HTML 코드 구문 분석, DOM 트리 생성, CSS 코드 구문 분석, 스타일 및 레이아웃 정보 획득, 새 트리 구조 생성, 화면에 페이지 그리기 등이 포함됩니다.

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

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

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

위 내용은 Microsoft, 3D 보기 도구에 복합 레이어 탭 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!