브라우저 렌더링 과정

브라우저 렌더링 과정

DOM트리 생성 - CSSOM트리 생성 - 렌더트리 생성 - 레이아웃 - 페인트
리플로우 - 리페인트

1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성 -> Parsing

가장 첫번째 단계는 서버로부터 받은 HTML, CSS를 다운로드 받습니다. 그리고 HTML, CSS파일은 단순한 텍스트이므로 연산과 관리가 유리하도록 Object Model로 만들게 됩니다. HTML CSS 파일은 각각 DOM Tree와 CSSOM으로 만들어집니다.

2. Render Tree 생성

DOM과 CSSOM 트리를 결합하여, 표시되어질 순서대로 Render Tree를 생성.
Render Tree에는 스타일 정보가 설정되어 있으며 '실제 화면'에 표현되는 노드들로만 구성됩니다. script, meta 태그 등은 반영되지 않는다.
ex) display: none; <= 그려지지 않음.
visibility: invisible; <= 안보이지만 그려짐.

3. Layout

브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계.
모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된다.

4. Paint

Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리게 됩니다. 이전 단계에서 이미 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree 를 이용해 실제 픽셀 값을 채워넣게 됩니다. 이 때 텍스트, 색, 이미지, 그림자 효과등이 모두 처리되어 그려집니다.

5. Reflow (Layout)

어떠한 액션이나 이벤트에 따라 html 요소의 크기나 위치등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout 과정을 다시 수행하게 됩니다. 이렇게 되면 Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 됩니다. 이러한 과정을 Reflow라고 합니다.

Reflow가 일어나는 대표적인 경우는 아래와 같습니다.

• 페이지 초기 렌더링 시(최초 Layout 과정)
• 윈도우 리사이징 시 (Viewport 크기 변경시)
• 노드 추가 또는 제거
• 요소의 위치, 크기 변경 (left, top, margin, padding, border, width, height, 등..)
• 폰트 변경 과(텍스트 내용) 이미지 크기 변경(크기가 다른 이미지로 변경 시)

6. Repaint (Paint)

Reflow만 수행되면 실제 화면에 반영되지 않습니다. 위에서 언급된 렌더링 과정과 같이 Render Tree를 다시 화면에 그려주는 과정이 필요합니다. 결국은 Paint 단계가 다시 수행되는 것이며 이를 Repaint 라고 합니다.

Reflow가 일어나는 대표적인 속성

Repaint가 일어나는 대표적인 속성

출처: https://boxfoxs.tistory.com/408

출처: https://boxfoxs.tistory.com/408#recentComments [박스여우 - BoxFox]