DOM Treemap 용 Google Chrome

Lighthouse DOM 트리맵 - DOM 크기를 줄이는 방법

지난 몇 년 동안 Google은 웹 애플리케이션의 과도한 크기에 대해 많은 경고를 발행했습니다. 이것은 사용자에게 매우 높은 비용을 초래합니다. 느린 렌더링과 브라우저 및 사용자 경험의 열악한 성능입니다.

애플리케이션의 성능을 향상시키기 위해 Lighthouse가 도입되었습니다. DOM의 크기를 줄이는 옵션. 많은 회사에서 이 조치는 메모리 소비를 줄이고 결과적으로 전체 문서의 크기를 줄이기 위해 구현되었습니다. 유감스럽게도 Chrome에서 메모리 소비가 약간만 개선되면 이 성능 문제가 다시 발생할 수 있습니다.

이 문제를 해결하려면 Chrome 이제 DOM 트리에서 매우 무거운 위치를 찾는 데 도움이 되는 새로운 기능인 DOM 트리맵이 있습니다.

트리맵은 Chrome 개발자 도구의 확장 기능입니다. 여기서 DOM 트리 시각화를 위한 추가 탭을 추가할 수 있습니다.

현재 페이지에서 모든 DOM 노드의 위치를 볼 수 있습니다. 어떤 요소에 가장 많은 자식이 있는지 찾으려면 도구 모음의 오른쪽 하단 모서리에 있는 "자식" 버튼을 클릭하기만 하면 됩니다.

BEM 선호도를 시각화하는 기능으로 도구가 확장되었습니다. 이를 통해 BEM 구성 요소가 평균적으로 얼마나 노드 집약적인지 확인할 수 있습니다.