Document Object Model

실제 돔(Real DOM)

Browser 로딩 과정

1. parsing(파싱)

• HTML(DOM트리) 해석과정

• CSSOM(CSS DOM트리) 해석과정

2. Style(스타일)

• HTML , CSS를 해석하는 과정을 거친 이후, 스타일을 매칭시켜주는 과정을 통해
Render Tree를 구성한다.

• 렌더 트리엔 page를 렌더링하는 데 필요한 노드만 포함시킨다.

3. Layout(레이아웃)

• 노드의 위치와 크기를 계산한다

• %로 지정된 값은 px 단위로 측정&계산된다

• 경우에 따라 reflow 라고도 한다

4.paint(페인트)

• 3까지의 과정이 완료 된 이후, 브라우저가 ‘Paint Setup’을 발생한다.

• Render Tree를 화면의 px로 변환한다.

• 위치와 관계없는 css속성(배경색, 투명도, 위치조정, 그림자효과 등)을 적용한다.

5.Compositing(합성)

• 화면에 표시하기 위해 페이지에서 페인트된 부분을 합치는 과정이다

성능

1. reflow , repaint

• 위에 적은 브라우저 로딩과정을 렌더링이라고 한다.

• 렌더링 과정은 상황마다 계속 반복하여 발생할 수 있다. (re-rendering)

• 브라우저는 성능적으로 렌더링 과정과 밀접한 관계가 있다.

• reflow(=Layout)은 다음과 같은 경우에 발생한다.
• element의 생성 및 삭제
• CSS의 높이 및 크기 수정 업데이트

• repaint(=paint)는 다음과 같은 경우에 발생한다.
• 위치와 관계없는 css 속성의 업데이트

2. 브라우저에게 치명적인 issue

• 브라우저는 반복된 랜더링에서, reflow가 순간적으로 많이 발생할 수록
성능적으로 속도저하라는 치명적인 이슈가 생긴다.



 
 

---

 

가상 돔(Virtual DOM)

Real DOM의 흐름을 보면, 업데이트(변경)가 있을 경우, Render Tree를 재생성하고, Layout을 만들고 paint를 하는 과정(=렌더링)이 전체적으로 발생하는데, 이러한 과정은 브라우저가 연산을 많이 해야한다는 말과 같으며 전체적으로 보면 프로세스를 비효율적으로 구성한단 말과 같다.
그래서 등장한 개념이 React의 가상돔(Virtual DOM)이다.
업데이트가 있을 때, 구 가상돔(Old Node)과 새 가상돔(New Node)을 비교하여 업데이트된 내용만 DOM에 적용하는 컨셉이며, 렌더링과정을 줄임으로써 UI 반응 속도를 높일 수 있다.





 
간추려 정리하자면,

• 잦은 DOM 조작은 비용이 많이 들고 속도가 느려진다.

• React는 가상돔(Virtual DOM)을 사용하여 성능(속도)를 향상시키는 방법을 채택했다.

• 가상돔(Virtual DOM)의 component는 지속적으로 관찰하여 상태 변경을 감지하려 시도한다.

• 가상돔(Virtual DOM) 이전, 이후 비교(diff)는 재조정 알고리즘을 사용하여 효율적으로 처리한다.

• 비교 결과 차이가 발생하면 실제돔(Real DOM)에 반영해 UI를 업데이트 한다.