Render Tree
앞에서 생성한 DOM Tree는 문서의 내용, CSSOM Tree는 그 문서에 적용할 스타일 규칙을 담고 있다. 이 둘은 아직 서로 독립된 객체이기 때문에 스타일이 적용된 내용을 출력하기 위해 둘을 합쳐 Render Tree를 생성한다.
주목할 점은, 넘어온 모든 정보들이 포함되어있는 DOM, CSSOM Tree와 달리 Render Tree는 실제 화면에 표시되는 노드들로만 구성된다는 점이다. 위의 도식에서 살펴보면, style에 display : none이 적용된 <span>은 Render Tree를 구성하지 않고 있다.
그 이유는, Render Tree를 구성하기 위해 Browser가 다음 과정을 거치기 때문이다.
1. DOM Tree의 루트에서 시작하여 표시되는 노드 각각을 가로지른다.
- 이 때, <script>, <meta> 등 렌더링된 출력에 반영되지 않는 태그들은 생략.
- CSS를 통해 *숨겨지는 노드들, 즉 'display: none' 속성을 가지는 노드들은 제외2. 각 노드에 일치하는 CSSOM 규칙을 찾아 적용한다.
3. 내용과 스타일이 적용된 노드를 내보낸다.
* 숨겨지는 노드들
visibility: hidden
요소가 보이지 않지만, 여전히 레이아웃에서 공간을 차지한다. (비어 있는 상자로 렌더링된다.)
display: none
요소가 보이지 않으며 레이아웃에 포함되지도 않도록 Render Tree에서 완전히 제거한다.
이렇게 Render Tree를 구성했다면, 이제 배치( reflow )와 그리기( paint )과정만 남았다!
위의 그림을 조금 더 간략하게 나타낸 도식이다.
Reflow ( 렌더 트리 배치 )
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
위에서 만든 Render Tree에는 화면에 표시할 노드와 그 노드에 정의된 스타일이 계산되어 있다. 하지만 실제 화면에서 어느 곳에 어떤 크기로 위치할지는 정해지지 않은 상태이다.
Reflow단계에서는 Render Tree를 루트에서부터 탐색하여 실제 기기 화면의 크기에 맞춰 노드의 정확한 위치와 크기를 계산한다. 상대적이었던 측정값을 화면 안에서의 절대적인 픽셀로 변환하는 과정이다. ( Layout 단계라고도 한다. )
Box Model
Reflow 단계에서 계산을 마치면 Box Model이 출력된다. Box Model 의 넓이는 viewport, 높이는 Contents ( fonts ) 기준으로 측정한다.
( 그러므로 윈도우 사이즈를 줄이거나 font가 변경되면 다시 계산이 필요하고, Reflow가 재발생한다. )
[ Reflow가 일어나는 대표적 속성 ]
| position | width | height | left | top |
| right | bottom | margin | padding | border |
| border-width | clear | display | float | font-family |
| font-size | font-weight | line-height | min-height | overflow |
| text-align | vertical-align | white-space | .... |
[ 기기 화면 안에서 박스를 배치하는 방식 ]
- Nomal: 일반적인 흐름에 따라 순차적으로 배치되는 박스. (DOM Tree 순서와 동일하다.)
- Float: 떠있는 상태로 배치되는 박스. Normal과 같이 배치된 후, 양 끝( left or right )으로 이동한다.
- Absolute: 절대적인, 즉 DOM Tree와 다른 자리에 배치되는 박스
Repaint (렌더 트리 표현)
Render Tree를 순회하며 이미 Reflow에서 계산한 위치, 크기를 제외한 나머지 CSS 속성들( 텍스트, 색상, 투명도, 이미지, 그림자 )을 적용하고, UI 백엔드를 이용하여 각 노드들을 실제 화면에 그린다.
[ Repaint가 일어나는 대표적인 속성 ]
| background | background-image | background-position | background-repeat | background-size |
| border-radius | border-style | box-shadow | color | line-style |
| outline | outline-color | outline-style | outline-width | text-decoration |
| visibility | .... |
배경색 -> 배경이미지 -> 테두리 -> 자식 -> 아웃라인 순으로 표현된다.
- Layout 이벤트가 타임라인에서 Render Tree 생성, 위치 및 크기 계산을 캡처한다.
- Layout 이 완료될 때, Browser가 Paint Setup 및 Paint 이벤트를 발생시켜 Render Tree를 화면의 픽셀로 변환한다.
( 최근에는 대부분의 Browser에서 Reflow와 Repaint 중간에 Layer 단계가 새로 추가됐다. )
Composite & Render (합성 & 렌더)
모든 객체들을 조합하여 Browser 화면을 업데이트하는 단계이다. 드디어 화면에 페이지가 나타났다!
DOM 이나 CSSOM 이 수정되면 이 과정을 다시 반복하는데, Rendering Engine 은 좀 더 나은 사용자 경험을 위해 모든 HTML 을 파싱할 때까지 기다리지 않고 Reflow 와 Repaint 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.
도움을 준 정보들
칼럼:
객체 모델 생성 | Web Fundamentals | Google Developers
브라우저가 DOM 및 CSSOM 트리를 구성하는 방법을 학습하십시오.
developers.google.com
렌더링 트리 생성, 레이아웃 및 페인트 | Web | Google Developers
TODO
developers.google.com
https://boxfoxs.tistory.com/408
브라우저 렌더링 과정 - Reflow Repaint, 그리고 성능 최적화
렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말합니다. 웹 개발을 하며 브라우저의 렌더링 과정을 정확하게 이해하고 있으면 어떻게 개
boxfoxs.tistory.com
[Web] Browser의 렌더링 과정 - 오늘의 기억
우리는 컴퓨터로 그리고 스마트폰에 설치된 브라우저를 이용해네이버나 구글 같은 웹 페이지에 접속한다.그럼 브라우저는 네트워크 통신으로HTML과 CSS, JS 파일 등 해당 웹 페이지에 필요한 리소
memory.today
https://velog.io/@ssoon_d/3.-Browsers-and-how-they-work
3. Browsers and how they work?
웹브라우저가 웹서버에 웹페이지를 요청하면 웹서버는 웹페이지 응답을 한다.서버가 브라우저에게 전달한 응답인 HTML 문서를 브라우저는 읽어들이고 해석한 후 사용자(Client)에게 보여준다.브��
velog.io
https://javannspring.tistory.com/233
브라우저 동작 원리(2) 렌더링 엔진 - 웹킷(Webkit), 블링크(Blink), Reflow, Repaint
렌더링 엔진 - 웹킷(Webkit), 블링크(Blink) 렌더링 엔진 웹 서버에 저장된 내용 정보(HTML, XML)와 서식 정보(CSS, XML) 등을 읽어 들여 사람이 읽을 수 있는 문서로 표시하는, 웹 브라우저의 핵심 기능을 �
javannspring.tistory.com
브라우저 엔진 (렌더링 엔진 / 레이아웃 엔진) 종류 및 브라우저별 CSS 적용 방법
들어가며 평소에 브라우저란 말을 많이 들어보셨을겁니다. 브라우저, 웹브라우저, 검색엔진, IE6 ~ IE11, 크롬, 파이어폭스 등등 브라우저란 HTML 문서와 그림, 멀티미디어 파일등을 WWW을 기반으로 �
linkhub.tistory.com
'WEB' 카테고리의 다른 글
| [WEB] REST API (0) | 2020.08.20 |
|---|---|
| [WEB] Cookie와 Session으로 HTTP의 비연결성, 비상태성 보완하기 (0) | 2020.08.19 |
| [WEB] Attribute와 Property (0) | 2020.07.31 |
| [WEB] HTML의 Meta Tag (0) | 2020.07.27 |
| [WEB] HTML4와 HTML5의 차이점 4가지 (0) | 2020.07.16 |
댓글