🧸 DOM과 브라우저 렌더링 과정

💡 DOM?

• 웹페이지에 대한 인터페이스
• 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있음
• HTML Tag -> JavaScript Node 로 변환
• 참고
  • https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
  • DOM API: https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API

💡 브라우저 렌더링 과정 (브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정)

순서: DOM Tree 만들기 -> CSSOM Tree 만들기 -> Render Tree 만들기

1. 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드함
2. 브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 트리(DOM)를 만듬
3. 2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드함
4. 브라우저의 렌더링 엔진은 이 CSS도 파싱해 CSS 노드로 구성된 트리(CSSOM)을 만듬
5. 브라우저는 2번에서 만든 DOM 노드를 순회 -> Render Tree 만듬
   • 눈에 보이는 노드만 방문
   • display: none 과 같이 사용자 화면에 보이지 않는 요소는 방문X
   • visibility: hidden -> 보여줌
   • 이유: 트리를 분석하는 과정을 조금이라도 빠르게 하기 위해서
6. 5번에서 제외된, 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용함
   • DOM 노드에 CSS를 적용하는 과정
     1. 레이아웃(layout, reflow): 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정. 이 레이아웃 과정을 거치면 반드시 페인팅 과정도 거치게 됨
     2. 페인팅(painting): 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정

🧸 가상 DOM의 탄생 배경

👀 이러한 문제점을 해결하기 위해 가상 DOM이 탄생

• 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 듬
• 렌더링이 완료된 이후에도 사용자의 인터렉션으로 웹페이지가 변경되는 상황 또한 고려해야 함
• 요소의 위치와 크기를 재계산하는 경우 레이아웃, 리페인팅이 일어나기 때문에 더 많은 비용이 듬
• SPA에서 추가 렌더링 작업이 더 많아짐