2023.05.13

렌더링 강의

출처 : https://www.youtube.com/watch?v=z1Jj7Xg-TkU

01. HTML 파싱 -> DOM 트리 생성

HTML -> HTML Parser -> DOM Tree

브라우저에 들어가고자 하는 사이트의 주소를 입력하면, 서버는 약속되어있는 HTML 파일을 우리 노트북의 브라우저로 전송한다.

➡ 이 때, 전송받게 되는 HTML은 8bit 형태로 전송되는데, 이를 Byte Stream이라고 한다.

우리 브라우저는 Byte 형태로 HTML 파일을 받아서 문자로 변환한 뒤,
노트북 브라우저가 가지고 있는 토큰과 비교하여 해당 문자가 HTML 코드인지 확인한다.

그 다음, 토큰화 과정을 통해서 노드(Node)가 생성된다.

💡 토큰
: 브라우저에 저장되어 있는 HTML의 시작, 종료 태그, 속성 같은 약속된 여러가지 값들
➡ 토큰은 HTML 코드인지 확인하는 일종의 설명서 역할을 함

💡 노드
: 거대한 Dom 트리를 이루는 한 단위

✨ 참고
브라우저가 Dom Tree를 생성할 때, link와 img 같이 다운로드 표시가 있는 노드를 만나면 해당 태그 안에 명시되어 있는 리소스를 다운받는다는 의미를 가지게 된다. 그리고 script 태그와 만나게 된다면, 브라우저는 Dom 생성을 중단하고 script 태그 안에 들어있는 자바스크립트 코드를 해석한다.

02. CSS 파싱 -> CSSOM 트리 생성

CSS -> CSS Parser -> CSSOM Tree

브라우저로부터 받은 CSS 파일을 문자로 해석한다.
그 다음, 토큰화하여 노드를 발행하고, 거대한 CSSOM 트리를 생성하게 된다.

➡ Dom 트리 생성과 크게 다른 점이 없다.

03. 렌더 트리 생성

Attachment -> Render Tree

DOM 트리와 CSSOM 트리가 모여서 렌더 트리를 생성한다.

04. 레이아웃 (리플로우)

렌더트리 배치

돔과 계산된 스타일을 따라가면서 요소의 크기나 좌표에 대한 정보를 담은 레이아웃 트리를 생성한다.

📌 주의
display : none;과 같은 속성은 렌더 트리 안에 포함되지 않음 !!!

05. 페인트 (리페인트)

렌더 트리 그리기

처음에는 요소 렌더링 순서, 정보를 바탕으로 한 페이지를 여러 개의 레이어로 나눈다.
그 다음에는 텍스트, 색, 이미지, 보더, 그림자 등 모든 시각적인 부분을 그리는 작업을 한다.

06. Composite

페인트 단계가 완료되면 실행됨

Composite 단계에서는 페인트 단계에서 만들어둔 다양한 레이어를 스크린에 픽셀로 표현한다.
그리고 나누어져 있던 레이어들을 하나로 합성하여 하나의 페이지를 만들어낸다.

📌 중요 !!!

리플로우
: css를 수정해서 화면에 보여지는 레이아웃이 변경된다면, 브라우저는 렌더 트리를 다시 생성하여 레이아웃을 다시 짜는 것

리페인트
: 페인트 속성들이 변경된 경우, 렌더 트리를 다시 생성하여 다시 꾸미는 것

➡ 리플로우와 리페인트가 반드시 순차적으로 실행되는 것은 아님
레이아웃의 영향의 없는 변경은 리플로우 대신 리페인팅만 실행됨

➡ CSS 속성 중 transform과 opacity는 리플로우와 리페인트 단계를 생략할 수 있음 (GPU과 관여할 수 있는 속성이기 때문 !)
그렇기 때문에 애니메이션을 구성할 때는 transform 속성을 많이 사용한다.