[3] HTML의 렌더링에 대해 궁금했던 것들 - Render Tree

Render Tree

DOM과 CSSOM 결합  → Render Tree 생성 → Layout (Reflow) →  Paint

 

 

1. Render Tree는 "화면에 보일 요소만" 포함한다.

Render Tree 생성할 때 display: none 요소는 왜 제외될까? 
(display: none과 visibility: hidden의 차이)

DOM에는 문서에 있는 모든 노드가 들어 있지만, 화면에 표시될 필요 없는 요소까지 그릴 필요는 없다.

1) display: none = "아예 화면에 렌더링하지 마!" 
그러므로 Render Tree 만들 때 아예 제외된다. 완전히 숨겨지는 것이기에 존재하지도 않는다.

 

2) visibility: hidden = 존재는 하되 "보이지 않게"만 해줘

그래서 Render Tree에는 존재함.

 

3) Render Tree필터링 규칙

조건	Render Tree	이유
display: none	❌ 제외	렌더링 안 함. 아예 그릴 필요 없음.
visibility: hidden	✅ 포함	공간은 차지하지만 눈에 안 보이게.
opacity: 0	✅ 포함	렌더링은 되지만 투명하게 표시.
position: absolute / fixed	✅ 포함	위치 계산만 별도로 하지만 화면에 존재.
overflow: hidden	✅ 포함	클리핑만 할 뿐, 렌더링은 함.

 

 

2. CSSOM이 늦게 도착하면?

Render Tree의 생성 조건이 DOM과 CSSOM이라 Render Tree를 만들지 못한다.

Render Tree가 없으면 다음 단계인 Layout와 Paint도 진행할 수 없으므로 Critical CSS가 준비될 때까지 기다려야한다.

<link rel="stylesheet">는 rendering blocking(렌더 중단)을 발생 시킨다. 이때, 파싱은 진행되고 있음.

 

* First Paint (FP) : 브라우저가 아무것도 아니더라도 화면에 뭔가 색칠(Pixel)이 처음으로 발생한 시점
(ex: 배경색, 기본 하얀 배경만 칠해도 FP)

 

* First Contentful Paint (FCP) : 텍스트, 이미지, Canvas 등"사용자 눈에 의미 있는 콘텐츠"가 처음 그려진 순간

 

즉 CSSOM이 늦어지면
→ Render Tree 생성 지연
→ FP, FCP 지연
→ 사용자 체감 "느린 사이트"