브라우저 렌더링 #2

JS

파싱이란?

 

파싱은 쉽게 말해서 구문을 분석하는 행위라고 볼 수 있다.

구성 성분을 분해하고 분해된 성분의 위계를 분석해서 구조를 결정 (== 파스트리)
문법적으로 갖는 가장 작은 단위인 '토큰'으로 분해하고 이 토큰을 노드로 배치하고 이 노드들을 위계에 맞게 트리화 (== 파스트리)

 

화면에 그려지는것은? (== 브라우저 렌더링)

 

그러니까, 브라우저가 화면에 무언가 그리려면 당연히 소스가 필요하다.
흔히 아는 HTML, CSS, JS , 이미지 등등... 이 리소스들(자원)을 그럼 어디서 받아오는가? 서버에 요청해야 한다. 그렇다면 그 서버에 어떻게 요청할까?

바로 주소창의 URL이 그것이다. 브라우저렌더링#1

도메인 네임서비스 . URL의 호스 이름이 DNS를 통해서 진짜 주소인 IP주소로 변환이 되고 이 IP 주소를 갖는 서버에 요청을 보내는 것.

서버는 기본적으로 보통 index.html을 응답으로 주도록 설정되어 있다. 예를들어, 우리가 https://www.google.com 을 검색하면 사실은 https://www.google.com/index.html 을 요청하는 것 이라고 말할 수 있다.

 

---

HTML

HTML

 

HTML 문서는 오직 텍스트로만 이루어져있다. 이 텍스트들이 대체 어떻게 화면이 되는 것인고?
바로 여기서, 브라우저가 이해할 수 있는 형태로 바꾸는 작업이 필요하다! 이게 바로 DOM 구조라고 보면 된다.

1. 바이트(Bytes) : 서버는 브라우저에게 2진수 형태의 HTML 문서를 응답으로 준다.

2. 문자열(Characters) : 문서는 <meta>의 charset 속성에 지정된 방식으로 문자열로 인코딩 된다.(ex. UTF-8) 서버는 이 인코딩 방식은 응답 헤더에 담아준다.

3. 토큰(Tokens) : 문자열 형태의 HTML문서를 '토큰'단위로 분해한다. (문법적 의미를 갖는 코드의 최소 단위)

4. 노드(Nodes) : 각 토큰을 객체로 변환해, 노드를 생성한다. (DOM을 구성하는 기본 요소)

5. DOM : HTML문서의 요소들의 중첩관계를 기반으로 노드들을 트리 구조로 구성한다. 이 트리를 DOM이라고 한다.

 

HTML이 화면에 그려지기까지!

서버에서 HTML 파일을 받아와서 브라우저가 이해하기까지의 과정을 알아보았다.
렌더트리는 이름처럼 렌더링을 목적으로 만드는 트리이다 -- DOM, CSSOM
하지만, 렌더트리는 아직까지도 텍스트로 구성된 객체에 불과하다.

HTML == 문서 == 객체

그럼 우리가 보는 화면이 되려면 뭐가 필요한가?

페인팅이 필요하다.

페인팅?

우선 페인팅 전에 알아둬야할 것들이 잇다.

JS엔진이 JS를 번역하는 방법이 무엇이라 생각하는가.

똑같다. 문자열을 토큰단위로 분해하고 트리구조로 만들고 (AST 추상트리구문) 그리고 이걸 컴퓨터가 해석하고, 레이아웃을 계산하고 (레이아웃은 요소의 기하학적인 속성들을 찾는 과정)

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

다시 페인팅으로 돌아와서 이야기하자면, 페인팅은 이러한 픽셀들을 채워나가는 과정이다.

• 출처: https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y

 

---

 

정리

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