브라우저 렌더링 동작과정

0) HTML, CSS 다운로드

1) 다운로드 정보 기반으로 DOM(Document Object Model) & CSSOM(CSS Object Model) 생성

HTML과 CSS는 단순한 텍스트이기 때문에 연산과 관리가 유리하도록 Object Model로 만들게 됩니다. 모든 HTML 파싱이 끝나지 않았더라도, 이후의 과정을 수행하여 미리 보여줄 수 있는 내용을 출력하기도 합니다.

2) Render Tree 생성

DOM 과 CSSOM tree에 기반하여 Render Tree를 생성합니다. DOM에다가 CSSOM 의 스타일 정보가 설정되는 과정입니다. 실제 표현되는 노드들로 트리가 구성되게 됩니다.

안 보이게 하는 방법 중 display: none;은 공간을 차지하지 않기 때문에 Render tree에 포함되지 않고, visibility: invisible은 보이지 않지만 공간은 차지하기 때문에 Render tree에 포함됩니다.

3) Layout

브라우저에서의 Viewport 내에서 노드들의 위치와 크기를 계산합니다. Layout 단게에서는 브라우저 화면에서의 위치와, 크기를 계산합니다. %, vh, vw와 같은 상대적인 속성을 px로 변환하는 단계라고 볼 수 있습니다.

4) Paint

Layout 계산을 했으니 이제 실제 화면을 그리기 위해서 텍스트, 색, 이미지, 그림자 효과 등이 처리됩니다. 당연히 단순한 색상 보다는 그라데이션이나 그림자 효과 같은 것은 paint 과정이 더 오래 걸립니다.

• Reflow (Layout)

  액션이나 이벤트에 따라 레이아웃 수치를 다시 결정하는 것을 reflow라고 합니다.

  • 페이지 초기 렌더링, 윈도우 리사이징(viewport 변경), 노드 추가 또는 제거, 요소의 위치 또는 크기 변경, 폰트나 텍스트 또는 이미지 크기 변경

• Repaint (Paint)

  Reflow과정만 하면 실제로 반영이 안되기 때문에 Render tree를 화면에 다시 그려주는 paint 과정이 필요합니다. 색상 변경과 같은 paint과정만 필요한 것은 repaint만 수행됩니다.

• Reflow, Repaint 줄이기

  1) 사용하지 않는 노드에는 visibility: invisible보다는 display: none 사용

  2) Reflow, Repaint가 발생하는 속성 피하기

  3) 영향을 주는 노드 줄이기 (ex. position: absolute || fixed)

  4) 프레임 줄이기 (조금 더 버벅거리더라도)

• Virtual DOM이 필요한 이유

  실제의 DOM에 적용하기 전에 변화가 생긴다면 Virtual DOM에 적용시킨 뒤 최종적인 결과를 실제 DOM으로 전달합니다. 30개의 엘리먼트가 변했을 경우에, 30번 바뀌는 것 대신 한 번만 변경하면 되는 것입니다. 이는 React가 DOM보다 빠르지는 않지만 유지보수가 가능하고 충분히 빠르기에 사용되는 이유입니다. (손수 코드를 작성하는 것보다 나와있는 프레임워크를 사용하는 것이 편하기 때문에)

References

• 박스여우님: 브라우저 렌더링 동작과정 및 성능최적화
• Velopert님: 왜 Virtual DOM인가?
• 구글 developers: 렌더링 트리 생성, 레이아웃 및 페인트