브라우저에서 어떻게 렌더링을 하며 DOM은 무엇이고, Virtual DOM은 무엇인지 알아보자! 먼저, DOM부터 알아보자.
DOM
DOM은 Document Object Model의 약어로, HTML, XML 문서를 위한 API이다. 하나의 HTML 문서는 div, span등 여러 태그를 갖는다. 각 요소는 하나의 Node로 트리 형태로 저장되고, 이를 DOM 트리라고 한다. 예를 들어 div 태그 아래 span 태그가 있다면 div 노드라는 부모 아래 span 노드의 자식이 위치하는 것이다.
[출처: https://en.wikipedia.org/wiki/Document_Object_Model]
즉, HTML 문서를 파싱하여 브라우저가 렌더링하기 쉽게 바꾼 결과물이라고 할 수 있다. HTML 문서는 요구사항 문서, DOM 트리는 거푸집? 정도로 생각하면 될 듯 하다.
이제 DOM을 바탕으로 브라우저가 어떤 과정을 거쳐 화면에 뿌려보는지 알아보자.
브라우저의 기본 구조
브라우저의 주요 구성 요소는 아래와 같다.
- 사용자 인터페이스
주소 표시줄, 뒤로/앞으로 가기 버튼, 즐겨찾기 버튼 등. 웹 페이지 화면을 제외한 모든 부분- 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작 제어- 렌더링 엔진
웹 페이지 화면 표시. (HTML + CSS + JS)- 통신
HTTP 요청 등의 네트워크 통신에 사용- JS 해석기
JS 코드를 해석- UI 백엔드
콤보 박스와 창 같은 기본적인 화면을 담당.- 자료 저장소
LocalStorage/캐시
여기서 렌더링 엔진이 HTML 문서를 DOM 트리로 변환하고, 화면에 그려주는 역할을 한다.
렌더링 엔진
대표적인 브라우저인 크롬과 사파리는 WebKit 엔진을 사용하고, 파이어폭스와 모질라에서는 Gecko 엔진을 사용한다고 한다. 이러한 렌더링 엔진의 역할은 요청받은 문서를 브라우저 화면에 표시하는 것이다.
브라우저를 통해 웹 사이트에 진입할 때, 아래와 같은 과정을 거쳐 웹 사이트의 화면이 보이게 된다.
동작 과정
[출처: https://web.dev/howbrowserswork/]
위 다이어그램은 Webkit 엔진에 해당하고, 다른 엔진도 유사한 방식이라고 한다.
하나하나의 과정을 살펴보자.
- DOM 트리 생성
브라우저가 HTML 파일을 받아 DOM 트리를 만든다.- Render 트리 생성
css파일과 inline 스타일을 파싱하여 Render 트리를 만든다. (DOM + CSSOM)- Layout(Reflow)
Render 트리를 바탕으로 Layout 과정을 거친다. 이 때, 트리의 노드의 위치가 계산된다.- Paint(Repaint)
각 노드들을 실제 화면에 그린다.
DOM 트리에 변화가 생길 때마다 위 렌더링 과정이 실행된다. 인스타그램 같은 웹 페이지에서 좋아요 버튼을 눌렀을 때, 그 조그마한 하트 아이콘의 색을 바꾸기 위해 모든 화면의 요소들 새로 렌더링한다는 뜻이다. 불필요한 과정이 반복되는 느낌을 지울 수 없다.
Virtual DOM
이러한 성능 저하를 피하기 위해 고안된 개념이 가상 돔(Virtual DOM)이다.
[출처: https://coding-medic.com/2020/11/10/the-virtual-dom/]
Virtual DOM은 가상의 DOM 트리를 만들고, 이를 실제 DOM과 연동하는 것을 말한다. 가상의 DOM은 실제 DOM의 모든 구성 요소를 본떠 만든 건 아니다. API들은 제거하고 속성들만 받아와 만들었기 때문에 실제 DOM보다 가볍게 작업할 수 있다. 이 컨셉 덕분에 좋아요 버튼을 눌렀을 때, 변화가 없는 요소들은 그대로 두고, 변화가 필요한 하트 아이콘에만 렌더링 과정을 거칠 수 있으며 가볍게 처리할 수 있다.
