[이론] 브라우저 랜더링 과정 , 리액트를 왜쓰는가?

렌더링 과정

1.DOM ,CSSOM 생성

서버로부터 HTML ,CSS 를 받는다.

HTML ,CSS 는 단순한 텍스트 이므로 연산과 관리에 유리하도록 Object Model 로만든다.

HTML,CSS 는 각각 DOM (Docoument Object model) ,CSSOM (Css Object Model) 로 만들어진다.

 

DOM

CSSOM

 

2.Render Tree 생성

Dom 과 Cssom 을 이용하여 Render Tree 를 생성한다.

Render tree 는 스타일정보가 설정되어있으며 실제 화면에 표현되는 노드들로만 구성된다.

 

실제 화면에 표현되는 노드: 
display: none 은 render tree에 포함안됨
visibility : invisible 은 공간을 차지하기에 포함됨

 

3.Layout

브라우저의 뷰포트내에서 각 노드들의 위치와 크기를 계산한다.

즉 Render Tree 노드들이 가지고있는 스타일과 속성에 따라 브라우저 화면 어느위치 ,어떤크기로 출력할지

계산하는 단계이다 .

viewport (그래픽이 표시되는 브라우저의 영역)

 

3.Paint

Layout 계산완료시 요소들을 실제 화면에 그린다.

스타일이 복잡하면 소요시간이 늘어난다.
ex)
background-color : 단순
그라데이션 , 그림자 : 복잡 

 

Reflow(Layout) 
-어떤 액션이나 이벤트에 따라 html 요소의 크기나 위치등 레이아웃수치를
수정하게 되면 그에 영향을 받는 자식노드나 부모노드를 포함하여 
Layout 과정을 다시 수행하게된다.
그러면 render tree를 다시 계산하게 되는데 이를 Reflow라고한다.

Reflow가 일어나는 대표적인 경우는 아래와 같습니다.
- 페이지 초기 렌더링 시(최초 Layout 과정)
- 윈도우 리사이징 시 (Viewport 크기 변경시)
- 노드 추가 또는 제거
- 요소의 위치, 크기 변경 (left, top, margin, padding, border, width, height, 등..)
- 폰트 변경 과(텍스트 내용) 이미지 크기 변경(크기가 다른 이미지로 변경 시)

Repaint(paint)
결국 계산을 다시하면 다시 paint를 그리게되고 이를 Repaint 라고한다.

 

@@@ 왜 리액트, spa를 사용하는가?

일반적으로 dom에 접근하여 여러번의 속성변화 , 스타일변화를 수행하면 그에따라 여러번의 reflow,repaint가 발생하게된다.

리액트의 경우 Dom에 적용되기전에 Virtual Dom 에 먼저 적용시키고 그 최종적인 결과물을 Dom에 전달하게된다

 reflow ,repaint가 많이 일어나지만 한번에 묶어서 전달하기 때문에 연산을 한번만하는걸로 줄일수있다.

== 규모는 커질수있지만 연산을 한번만 하게됨

또한

DOM 관리를 Virtual DOM 이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM 을 조작할 것 이라던지, 이미 조작했다던지에 대한 정보를 공유 할 필요가 없어진다 . 

각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶어줄 수 있다는거죠