Post

브라우저 렌더링 과정

Posted Updated
By hyemin 7 min read

브라우저 렌더링 과정

브라우저렌더링 이미지 출처: https://web.dev/static/articles/howbrowserswork/image/webkit-main-flow-b779d50c0cf28_856.png?hl=ko

브라우저 렌더링 과정은 크게 5개의 단계로 나눠져있습니다.

  1. DOM TREE를 만드는 단계
  2. CSSOM를 만드는 단계
  3. 렌더 트리 만드는 단계
  4. 레이아웃 단계
  5. 페인팅 단계

1. DOM TREE를 만드는 단계

HTML을 파싱해서 DOM TREE를 만드는 단계입니다. DOM TREE는 돔 노드(DOM NODE)로 이루어져있으며, 돔 노드가 많아질수록 DOM 트리를 만드는데 오랜 시간이 걸립니다.
만약 async와 defer과 같은 설정이 되어있지 않은 <script>태그를 만나면, HTML 파싱을 일시적으로 중단하고, javascript 파싱을 먼저 수행합니다. 자바스크립트 파싱이 종료되면 파싱이 종료된 시점부터 다시 HTML 파싱을 시작합니다.

async와 defer는 자바스크립트 파싱때문에 HTML 파싱이 멈추는, 즉 DOM 생성이 중단되는 문제를 해결하기 위해 사용하는 속성입니다. 이를 사용하면 HTML파싱과 자바스크립트 로드가 비동기적으로 동시에 수행됩니다.

async 속성은 HTML 파싱과 자바스크립트 파일의 로드가 동시에 진행되며, 자바스크립트 파일의 로드가 완료되면 HTML 파싱이 중단되고 자바스크립트가 실행됩니다.

defer 속성은 HTML 파싱과 자바스크립트 파일의 로드가 동시에 진행되며, HTML 파싱이 완료된 후에 즉, DOM 생성이 완료된 후에 자바스크립트가 실행됩니다.

2. CSSOM를 만드는 단계

스타일 파일과 인라인 스타일을 파싱하여 CSSOM(스타일 렌더 트리)를 만든 단계입니다.
CSSOM을 만드는데 드는 시간은 일반적으로 DNS조회를 하는 시간보다 짧기때문에 웹 성능 최적화 관점에서는 성능 향상에 큰 역할을 기여할 수 있는 영역은 아닙니다.

3. 렌더 트리 만드는 단계

DOM TREE와 CSSOM를 합쳐서 렌더 트리를 만드는 단계입니다. 브라우저는 Attachment 과정을 통해 화면에 표시될 부분의 스타일 정보를 계산합니다.
이 때 display:none 속성을 가진 요소는 렌더 트리에 포함이 되지 않지만, visible:hidden 속성을 가진 요소는 자리를 차지하기 때문에 렌더 트리에 포함됩니다.

4. 레이아웃 단계

렌더 트리를 기반으로 각 노드의 도형 값을 계산하기 위한 단계입니다. 렌더 트리에 있는 모든 노드의 너비, 높이, 위치를 결정하며, 각 객체의 크기와 위치를 계산합니다.
자바스크립트를 사용하여 돔 트리를 조작하게 되면, 레이아웃 과정을 통해 각 노드의 도형 값을 다시 계산하고, 크기와 위치를 계산합니다. 레이아웃이 다시 수행되는 과정을 리플로우(Reflow)라고 합니다.

5. 페인팅 단계

각 노드를 화면에 페인팅하는 단계입니다. 레이아웃단계에서 계산된 노드들을 실제 화면의 픽셀로 변환한 뒤에 텍스트, 색, 경계, 그림자 및 버튼이나 이미지 같은 대체 요소를 포함한 모든 요소의 시각적 부분을 화면에 그립니다. 이 때 페인트 작업이 많이 발생하면 그래픽 리소스를 많이 사용하게 되어 페이지 로딩 시간이 길어질 수도 있습니다.
자바스크립트를 사용하여 돔 트리를 조작하게 되면 리플로우 과정이 실행되고, 페인팅 단계 역시 다시 실행됩니다. 다시 수행되는 과정을 리페인트(Repaint)라고 합니다.

Reflow와 Repaint는 언제 다시 실행되는가?

  • 자바스크립트에 의한 노드 추가 또는 삭제
  • 브라우저 창의 리사이징에 의한 뷰포트 크기 변경
  • HTML 요소의 레이아웃 변경을 발생시키는 width/height, margin, padding, border, display, position, top/bottom/left/right 등의 스타일 변경

Reflow와 Repaint은 항상 순차적으로 실행되는 것은 아닙니다. 레이아웃에 영향이 없는 변경은 Reflow 과정 없이 Repaint과정만 실행됩니다.
Reflow와 Repaint 과정을 많이 수행하게 된다면 웹 애플리케이션의 성능이 떨어지게됩니다.

리액트가 가상 DOM을 사용하는 이유?

리액트에서는 이러한 Reflow와 Repaint를 최소화하기 위해 가상의 DOM을 사용하였습니다. 가상 DOM은 메모리 상에를 만들고, 가상 돔 트리 돔 트리의 변경이 발생하면 가상 돔 트리에서 모든 연산을 한 후에 실제 돔 트리를 갱신하는 방식입니다.

출처

기타
This post is licensed under CC BY 4.0 by the author.