1. 소개
- 지난 포스팅에서는 페이지 로딩 과정에 대해 알아보았다. 거기서 렌더링을 간단하게 짚어보았는데, 이번 포스팅에서는 그 부분에 대한 과정을 좀 더 자세히 알아보고자 한다.
- 브라우저가 렌더링 하는 과정을 간단하게 미리 언급하자면, 먼저 html과 css를 처리하여 DOM트리와 CSSOM 트리를 빌드한다. 그리고 그 둘을 결합하여 렌더트리(렌더링트리)를 만들고, 각 레이아웃을 실행하여 형태를 계산한다. 마지막으로 그들을 그린다. 이제 이 과정을 세세하게 알아보자.
2. 과정
* DOM
- 다운받은 html을 파싱하며 DOM트리를 만든다.
- html을 파싱하는 것은 다음 일련의 과정을 거친다.
∙ Conversion : 바이트를 읽고 인코딩하여 문자열로 바꾸는 과정을 의미한다.
∙ Tokenizing : tokenizer가 문자열을 고유한 토큰으로 변환한다. 각 토큰은 <html>, <body>, </body> 등을 의미한다.
∙ Lexing : lexer가 토큰에 의미를 부여하는 단계이다.
∙ DOM construction : parcer가 위에서 생성된 객체를 트리구조로 만들어낸다.
* CSSOM
- 위에서 파싱 도중 link태그를 만나면 서버에 CSS파일 요청을 보내고, 받은 css파일을 파싱하여 CSSOM 트리를 만든다.
- CSS파싱이 완료되면 HTML파싱이 중단된 부분부터 다시 파싱하여 DOM을 마저 생성한다.
* Render Tree
- DOM과 CSSOM 트리가 생성되고나서 Render Tree(렌더트리 또는 렌더링트리)단계로 넘어온다.
- DOM과 CSSOM은 각각 독립된 트리 모델이다. 하나는 contents를 설명하고, 다른 하나는 스타일 규칙을 설명한다. 렌더트리는 이 둘을 병합하여 페이지에 렌더링할 노드를 기록한다.
- 이 때, 일부 노드들(script 태그, meta, 태그 등은 렌더링된 출력에 반영되지 않으므로 생략된다. 그리고 css에서도 display: none과 같이 화면에 공간도 차지하지 않고 보이지도 않는 노드도 생략된다. visibility : invisible은 공간은 차지하므로 포함된다.
* Layout
- 렌더 트리가 생성되면 레이아웃 단계로 넘어온다. 렌더 트리의 루트부터 시작하여 각 객체의 크기와 위치를 파악하는 단계이다.
- 레이아웃 단계를 통해 %, vw와 같은 상대적인 사이즈들이 픽셀단위로 변환된다.
* Paint
- 레이아웃이 위치와 크기와 관련된 단계였다면 페인트 단계는 실제로 그리는 단계이다. 레이아웃이 완료되면 브라우저는 Paint Setup 및 Paint 이벤트를 발생시킨다.
- 이미 이전 단계에서 사이즈들이 계산되어 있으므로 페인트는 텍스트, 색, 그림자, 이미지 등을 넣는다. 참고로 그림자나 그라데이션과 같이 스타일이 복잡한 것들은 페인트 시간을 길게 만든다.
3. 리플로우와 리페인트
- 위에서 렌더링 과정을 살펴 보았는데, 더 짚고 넘어가야하는 것이 있다. 알다시피 어떤 이벤트에 따라 화면이 다시그려지는 것을 우리는 수없이 봐왔다. 이러한 것들에서 레이아웃과 페인트 과정이 반복되어 일어난다.
- 레이아웃과 페인트 과정이 발생하는 것은 웹 성능 최적화와도 관련이 있으므로 반드시 알아둬야 한다.
* Reflow(Layout)
- 리플로우는 레이아웃의 과정을 의미한다. 만일 우리가 JS로 DOM의 변경을 만들어내면 렌더트리도 다시만들어지는데, 이 때 어쩔 수 없이 리플로우 과정이 일어난다.
- 위 상황외에 요소의 크기나 위치가 변경되면 리플로우가 발생하고 다시 페인트가 발생한다.
- 폰트나 텍스트 내용이 변경되더라도 리플로우부터 다시 발생한다.
* Repaint
- 리플로우가 발생했다고 끝이 아니다. 리플로우가 발생했으면 당연히 페인트 과정도 연달아 일어난다.
- 리페인트만 일어나는 과정도 있다. 만일 레이아웃과는 무관한 색상과 같은 부분이 변경된다면 렌더트리를 재활용할 수 있으며 리페인트만 일어난다. 이 때에는 리플로우보다 가볍게 동작한다.
참고
렌더링 트리 생성, 레이아웃 및 페인트 | Web | Google Developers
TODO
developers.google.com
Constructing the Object Model | Web Fundamentals | Google Developers
Learn how the browser constructs the DOM and CSSOM trees.
developers.google.com
브라우저 렌더링 과정 - Reflow Repaint, 그리고 성능 최적화
렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말합니다. 웹 개발을 하며 브라우저의 렌더링 과정을 정확하게 이해하고 있으면 어떻게 개
boxfoxs.tistory.com
브라우저 로딩 과정
처음 웹페이지에 접속하면 브라우저는 서버로 요청을 보내 html, css, js 등의 파일을 다운로드 받고 파싱해서 화면에 보여준다. 이러한 브라우저 로딩과정은 다운로드, 파싱, 스타일, 레이아웃, 페
simsimjae.medium.com
브라우저의 렌더링
HTML 파싱과 DOM 생성 브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수 텍스트다. 순수 텍스트인 HTML 문서를 브라우저에 시각적인 픽셀로 렌더링하려면 HTML 문서를 브라
rkdvnfma90.tistory.com
'Computer Science > Network' 카테고리의 다른 글
| <네트워크> http 버전 별 특징 (3.0) (0) | 2022.01.08 |
|---|---|
| <네트워크> http 버전 별 특징 (0.9 / 1.0 / 1.1 / 2.0) (2) | 2021.12.30 |
| <네트워크> 페이지 로딩 과정 (0) | 2021.08.28 |
| <네트워크> 무선 랜 (0) | 2021.04.29 |
| <네트워크> OSI모델의 흐름 (0) | 2021.04.27 |
