브라우저 렌더링 과정에 대해 설명해주세요..md

브라우저의 역할: 서버에 리소스 요청, 응답 받은 리소스 화면에 표시

1. HTML 파싱을 통한 DOM 생성
   • HTML 파일은 렌더링 엔진의 HTML 파서에 의해 파싱(Parsing)되어 DOM 트리로 변환
2. CSS 파싱을 통한 CSSOM 생성
   • CSS 파일은 렌더링 엔진의 CSS 파서에 의해 파싱(Parsing)되어 CSSOM 트리로 변환
3. DOM & CSSOM 결합
4. 렌더 트리 Render Tree 생성
5. 레이아웃 계산
6. 화면 렌더링

HTML 파싱과 DOM 생성 & CSS 파싱과 CSSOM 생성

문자열 변환

• byteStream으로 전송된 파일을 문자열로 변환
• meta 태그의 charset 속성에 지정된 인코딩 방식을 기준으로 변환

토큰화

• 문법적 의미를 갖는 코드의 최소 단위인 토큰으로 분해

Node 생성

• 각 토큰으로 기본 구성 요소인 노드Node 생성

DOM & CSSOM 생성

• 렌더링 엔진은 서버로부터 전달받은 HTML/CSS 파일 파싱Parsing
• 구성 요소 간의 관계를 반영한 트리 형태의 자료 구조 생성
• CSSOM 생성 시점
  • HTML 파싱 과정에서 CSS를 로드하는 link 태그나 style 태그를 만나면 서버에 해당 리소스 요청
  • CSS 파싱을 통해 CSSOM 생성이 완료되면 파싱이 중단된 시점부터 다시 파싱하며 DOM 생성 재개

렌더 트리 생성 Render Tree

• 생성된 DOM과 CSSOM을 결합
• 렌더 트리 생성
  • 브라우저 화면에 실제로 렌더링되는 노드만으로 구성
  • 렌더링에 관여하지 않는 노드는 포함되지 않는다. (ex. meta 태그, script 태그, display: none)

렌더 트리 레이아웃 Render Tree Layout

• 렌더 트리를 기반으로 레이아웃 계산
  • HTML 요소의 위치와 크기
  • 레이아웃 관련 속성: position, width, height, margin, padding

렌더 트리 페인팅 Render Tree Painting

• 계산값을 기반으로 각 요소를 화면상의 실제 픽셀로 변환 & 레이어 생성
  • 모든 시각적 요소 포함: HTML 요소를 렌더링하는 순서, 페이지를 구성하는 Layer 등
  • 페인트 관련 속성: background, box-shadow, color, border

합성Composite

• 생성한 레이어를 합성하여 실제 화면에 표시

리플로우 Reflow

• 레이아웃에 영향을 주는 변경이 발생한 경우 레이아웃 재계산
  • 노드 추가/삭제, 요소 크기/위치 변경, 윈도우 리사이징 등

리페인트 Repaint

• 렌더 트리에 변경이 생기면 다시 페인트 진행

하드웨어 가속

• GPU
• transform, opacity

참고자료

• 모던 자바스크립트 딥다이브 38장 브라우저의 렌더링 과정 38.3 - 38.9