브라우저 렌더링 / React에서의 렌더링

💻 1. 렌더링이란?

• 웹 브라우저안의 렌더링 엔진이 텍스트와 이미지를 그려(html, css) 화면에 보여주는 과정

• [참고] 웹 관련 용어

💻 2. 브라우저 렌더링 과정

웹 브라우저에 사용자가 url을 입력하면 웹 서버에 요청을 보내게 되고 그 서버가 응답하게 되면 렌더링이 시작된다.

[렌더링 흐름]

HTML 파싱 → DOM 트리
CSS 파싱 → CSSOM 트리
        ↓
   Render Tree (DOM + CSSOM 결합)
        ↓
     Layout (자리/크기 계산, Reflow)
        ↓
      Paint (그리기, Repaint)
        ↓
    Composite (레이어 합성, 최종 화면)

1) 🧩HTML 파싱 → DOM 트리 파싱

• 읽기 과정

[브라우저가 html을 해석하기 편하도록 작업하는 과정]

바이트 → 문자 → 토큰 → 노드 → 객체 모델(Dom tree)

바이트 : 전송 된 html는 8비트의 데이터 형태이다. 바이트 → 문자 : 브라우저는 바이트를 읽고 지정된 파일 인코딩(ex. utf-8)에 따라 문자로 변형합니다.

<head>
	<meta charset="UTF-8">
</head>

문자 → 토큰(토큰화) : 문자열을 의미가 있는 고유한 토큰으로 변환한다.

토큰 → 노드 : 토큰은 속성과 규칙을 정의하는 객체로 변환된다.

노드 → 객체모델 : 서로 다른 태그 간의 관계를 정의하기 위해 마크업에 정의된 상위-하위 관계도 보여 줄 수 있는 트리 데이터 구조로 만든다.

***DOM(document object model)이란 html태그를 브라우저가 해석하기 편한 방식으로 변환해놓은 객체 모델이다.

***DOM tree가 만들어지는 과정에서 script 태그에 도달하면 파싱 중단하고 해당 노드안의 자바스크립트 코드를 다운로드 실행한뒤 다시 파싱을 진행한다.

2) 🧩CSS 파싱 → CSS 트리 생성

• 읽기 과정2

1)과정과 동일하다