[Today I Learned] 브라우저의 렌더링 과정

브라우저 렌더링 기본동작 순서

1. Client가 WEB Server 에게 받은 IP 주소로 요청하면,WEB Server 는 Client 에게 해당 웹페이지의 index.html 등의 파일들을 보내준다.

2. 브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리 를 만든다.
   (이 파일들은 단순한 텍스트이므로 연산과 관리가 유리하도록 Object Model로 만들게 된다)

3. 브라우저는 서버가 보내준 CSS 파일 을 해석(Parsing)하여 CSSOM(CSS Object Model)트리도 만든다. CSS 내용을 파싱 하여 자료를 구조화한 것을 CSSOM이라 함.

4. DOM 트리 + CSSOM 트리 를 결합해 렌더트리 를 만든다.
   (렌더트리에는 스타일 정보가 들어있고, 실제 화면에 표현되는 노드들로만 구성된다.
   예를 들어 display: none; 속성은 제외되고 visibility: invisible 은 포함된다)

5. 렌더트리로 각 노드의 위치와 크기를 계산한 레이아웃 을 만든다. 뷰포트(Viewport) 내에서 각 노드들의 위치와 크기를 계산한다.
   즉 , 브라우저 화면의 어떤위치에 어떤크기로 출력될지 계산 하는 단계이다

6. Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리는 페인트(Paint) 를 한다.
   (요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree 를 이용해 실제 픽셀 값을 적용한다.)

최적화를 위한 Virtual DOM

실제 dom구조를 반영한 상태로 메모리에 있는 가상의 dom 이다.
DOM 은 새로운 요청이나 변경사항이 있을 때마다 매번 리렌더링 을 한다.
( 한글자만 수정해도 리렌더가 일어나는 것이다. )
하지만 매번 새롭게 구성하기 때문에, 양이 엄청 많으면 분명 퍼포먼스가 떨어질 것이다. (과부하도..)

여기서 이제 Virtual DOM의 장점이 나오게 된다.

일반적으로 dom에 접근해서 속성이나 스타일을 수정하게 되면 매번 Reflow, Repaint가 발생하게 된다. 하지만 Virtual DOM은 Reflow, Repaint가 필요한 것들을 한번에 묶어서 dom에 전달한다. 따라서 처리되는 Reflow, Repaint의 규모가 커질 수는 있지만, 한번만 연산을 수행하게 되므로 반복적인 부분이 줄어들어 성능이 개선된다.