2022.06.13 TIL ( 브라우저가 렌더링 되는 과정 )

🍄 브라우저가 렌더링 되는 과정

1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다.
2. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더 트리를 생성한다.
3. 브라우저 JS 엔진은 받아온 JS를 파싱해 AST를 생성하고, 바이트코드로 변환해 실행한다.
4. 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다.
5. 화면에 HTML요소를 페인팅한다.

STEP 1. 요청과 응답

👉 브라우저는 우선 필요한 리소스(HTML, CSS, JS, 이미지, 폰트..)를 서버에 요청하고, 응답으로 받아와야 한다.

• 브라우저에 있는 주소창이 그 역할을 한다.
• 주소창에 URL을 입력하고 엔터키를 누르면, URL의 호스트 이름이 DNS(도메인 네임 서비스)를 통해 진짜 주소인 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에게 요청을 보낸다.

STEP 2. HTML 파싱, DOM 생성 👉 CSS 파싱, CSSOM 생성 👉 렌더 트리 생성

👉 오직 텍스트로만 이루어진 HTML문서를 브라우저가 이해할 수 있는 형태인 DOM구조로 변환한다.

 👩‍💻 DOM은 Document Object Model의 줄임말인데, 우리말로는 문서 객체 모델이라 할 수 있다. 
 👩‍💻 말 그래도 문서를 → 객체로 바꾼 모델이다. 
 👩‍💻 브라우저는 Javascript 언어만 알아듣는데, Javascript는 HTML의 태그나 속성들을 바로 다룰 수 없기 때문이다.
 👩‍💻 그렇기에 다룰 수 있는 형태인 '객체'로 바꿔주어야 한다. 
 👩‍💻 그래야 브라우저도 HTML 문서를 이해할 수 있게 된다.

👉 앞서 html 파일을 파싱하다가 link, style 태그를 만나면 파싱을 잠시 멈추고 리소스 파일을 서버로 요청한다.

 👩‍💻 CSS 파일도 HTML과 마찬가지로 파싱을 한다. 
 👩‍💻 서버에서 받아온 2진수 파일을 문자열로 인코딩하고, 토큰 단위로 나누고, 노드를 생성하고, 트리를 만든다.
 👩‍💻 이렇게 파싱해 만든 트리는 CSSOM 이라고 한다.
 ❓ CSSOM : CSS Object Model의 줄임말이다. 
 ❓ 즉, CSS 문서를 객체 모델로 바꾼 것

👉 서로 다른 속성들을 가진 독립적인 트리들인 DOM과 CSSOM 둘을 합치는 작업이 필요하다.

👩‍💻 렌더 트리는 이름처럼 렌더링을 목적으로 만드는 트리이다. 
👩‍💻 렌더링은 브라우저가 이제 진짜로 사용자에게 보여주기 위한 화면을
그리는 과정이기 때문에, 보이지 않을 요소들은 이 트리에 포함하지 않는다.

STEP 3. Javascript 파싱

👉 Javascript 파싱은 브라우저 렌더링 엔진이 직접하지 않고, Javascript 엔진이 담당하게 된다.

👩‍💻 JS엔진은 js파일의 코드를 파싱해서 컴퓨터가 이해할 수 있는 기계어로 변환하고 실행한다. 
👩‍💻 좀 더 구체적으로 살펴보면, 먼저 단순한 텍스트 문자열인 코드를 토큰 단위로 분해한다. 
👩‍💻 이렇게 분해된 토큰에 문법적인 의미와 구조가 더해져, AST(추상 구문 트리) 라는 트리가 완성된다.

STEP 4. 레이아웃(리플로우)

👉 레이아웃은 요소의 기하학적인 속성들을 찾는 과정이다.

👩‍💻 브라우저는 각 요소들이 전체 화면에서 어디에, 어떤 크기로 배치되어야 할 지 파악하기 위해 렌더트리의 맨 윗부분부터 아래로 내려가며 계산을 진행한다. 
👩‍💻 모든 값들은 절대적인 단위인 px값으로 변환된다.

STEP 5. 페인팅

👉 각각 정보를 가진 픽셀들이 모여 하나의 이미지, 화면을 구성하는 것이다.

👩‍💻 페인팅은 이러한 픽셀들을 채워나가는 과정이다. 
👩‍💻 따라서 이 과정을 마지막으로 우리는 단순한 텍스트에 불과했던 파일 내용들을 이미지화된 모습으로 브라우저 화면을 통해 볼 수 있게되는 것이다.

🌱 리플로우, 리페인트

• 리플로우 = 레이아웃 계산을 다시하는 것
• 리페인트 = 새로운 렌더트리를 바탕으로 다시 페인트를 하는 것