layout tree레이아웃 트리

layout tree는 브라우저 렌더링 엔진이 HTML 문서의 DOM과 CSS 스타일 정보를 바탕으로 만드는 트리 구조다. 화면에 실제로 표시되는 요소만 담고, 각 요소의 크기와 위치 같은 배치 정보를 계산해 둔다. 브라우저는 이 구조를 이용해 페이지를 화면에 그린다.

문서의 모든 요소를 담는 DOM과 달리 표시되지 않는 요소는 빠진다. 엔진에 따라 render tree라고도 부른다.

이 설명은 AIPOST 기사와 널리 알려진 사실을 바탕으로 정리했습니다. 잘못된 내용이 있으면 정정 요청으로 알려 주세요.