브라우저의 렌더링 (+가상DOM)

 

리액트의 대표적인 특징인 가상 DOM을 사용하는데 있어서브라우저가 렌더링되는 과정을 이해하는게 중요하다.

브라우저 렌더링 과정을 통해서 가상 DOM이 어떻게 생겨났는지 알아본다.

 

브라우저 렌더링과 DOM

1.사용자가 어떤 웹 페이지를 방문한다. 브라우저는 사용자가 요청한 주소의 HTML 파일을 다운로드한다.

2.브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 DOM트리를 만든다.

3.DOM을 생성하다 CSS 파일을 만나면 해당 CSS파일도 다운로드하여 CSS도 파싱하고 트리를 생성한다(CSSOM)

4.브라우저는 DOM노드를 2번에서 생성된 DOM트리를 순회하며 사용자 눈에 보이는 노드만 방문한다.

(* 분석과정을 조금이라도 줄이기 위해서 display:none과 같은 화면에 보이지 않는 요소들은 방문하지 않고 넘어간다.)

5.눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM정보를 찾고 발견한 CSS 스타일 정보를 노드에 적용한다.(Render Tree)

이때 CSS를 적용하는 과정은 크게 두 가지로 나눌 수 있다.

  -레이아웃(layout,reflow)

    각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정

  -페인팅(painting)

    레이아웃 단계를 거친 노드에 색과 같은 실제 화면에 보이는 모습을 그리는 과정

   

reflow와 repaint

브라우저가 웹 페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다.

대다수의 웹 페이지는 렌더링 이후 정보를 보여주고 나서도 인터랙션을 통해 다양한 정보를 추가적으로 표시한다.

따라서 렌더링 이후에도 웹페이지가 변경되는 상황이 생길 수 있다.이때 발생할 수 있는게 리플로우와 리페인팅이다.

 

리플로우

• 요소의 너비, 높이, 위치 등 레이아웃이 변경되어 렌더트리를 재생성하는 작업
• 리플로우는 반드시 리페인팅이 발생하게 된다.
• 리플로우는 비용이 큰 작업이다.

 리페인팅

• 변경된 요소를 화면에 다시 paint하는 작업을 말한다. 
• 리플로우가 발생하거나 요소의 스타일(색상,배경 등)이 변경되었을 때 리페인팅을 수행한다.
• 리플로우보다 비용을 적게 차지한다.

정리하면 리플로우와 리페인팅은 브라우저의 렌더링 단계에서 레이아웃과 페인팅 단계를 다시 수행하는것이다.

페이지가 변경되면 새로운 페이지를 불러와서 다시 렌더링하는 일반적인 웹페이지와는 다르게

하나의 페이지에서 계속해서 레이아웃 변화가 발생하는 SPA(Single Page Application)에서 이러한 과정이

더욱 두드러진다. 이러한 지속적으로 발생하는 리플로우와 리페인팅 문제를 해결하기 위해 나타난것이 가상 DOM이다.

 

가상DOM

가상 DOM이란 실제 DOM이 아닌 리액트가 관리하는 가상의 DOM을 말한다. 

가상 DOM은 웹페이지가 표시해야 할 DOM을 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료되면

실제 브라우저의 DOM에 반영한다.그래서 DOM 계산을 브라우저가 아닌 메모리에서 계산하는 과정을 한 번 거쳐

여러 번 발생했을 렌더링 과정을 최소화 할 수 있게된다.