DOM Tree : HTML을 읽고 파싱한 어떠한 계층
CSSOM Tree : 스타일 시트를 읽고 파싱한 어떠한 계층
스타일 시트를 받음
스타일 시트 파싱
CSS Style 규칙을 구성하고 CSSOM Tree(CSS Object Tree)를 생성
DOM Tree와 CSSOM Tree를 결합 (Attachment)
- 두 가지를 합쳐서 어떤 엘리먼트에 어떤 스타일을 부여하는 작업을 함
렌더 트리를 생성
각각의 DOM 트리별로 어떤 스타일 정보를 가지고 있는 지 렌더트리를 다시 실제로 소프트웨어의 어떤 객체 모델로 객체화 시킴
객체화? key와 value로 된 구조로 만드는 것
브라우저는 렌더 트리를 읽어 Layout 혹은 Reflow라는 과정을 통해 Dom 노드의 위치와 그래픽을 계산 결정
렌더트리 완성
렌더트리를 통해 화면에 실제로 그려주는 페인팅 작업
화면에 출력
렌더링 엔진은 좀 더 나은 사용자의 경험을 위해 먼저 파싱된 내용부터 화면을 그림
<
을 열고 어떤 HTML 태그를 쓰고 >
를 닫게 되어 있음<html>
<body>
<p>
Hello World
</p>
<div>
<img src="example.png"></div>
</div>
</body>
</html>
위와 같은 모습으로 구성이 되어 있음
트리구조를 만들어서 브라우저가 처리하게 됨
→ DOM Tree
위의 내용은 Web을 공부하며 개인적으로 정리한 내용입니다.