5.2 랜더트리

DOM과 CSSOM을 합쳐서 실제로 화면에 그려질 요소만 추려낸 트리다.display: none은 렌더 트리에서 완전히 제외된다.

DOM에는 존재하지만, 렌더 트리에는 아예 노드 자체가 없다. 그래서 공간도 차지하지 않고 레이아웃 계산 대상도 아니다.

 

 

---

프론트엔드에서 실제로 연결되는 포인트:

Vue의 v-if는 display: none처럼 DOM 자체를 제거한다. 렌더 트리에도 없다.

v-show는 display: none 스타일만 토글한다. DOM과 렌더 트리 모두 유지하다가 스타일만 바꾸는 거다.

그래서 자주 토글되는 요소는 v-show, 거의 안 바뀌는 조건부 요소는 v-if가 성능상 낫다. 렌더 트리 재구성 비용 때문이다.