요약

1. 브라우저의 렌더링 과정

브라우저의 렌더링이란 브라우저가 어떻게 HTML, CSS, JavaScript를 해석해서 화면에 출력하는 것을 의미한다.

• 용어 정리
  1. 파싱: 구문분석, 문자열을 토큰단위로 분해하는 것을 의미한다.
  2. 토큰: 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소
  3. 렌더링: HTML, CSS, JavaScript을 파싱해서 브라우저에 시각적으로 나타낸 것
  4. 리소스: HTML, CSS, JavaScript, Image 등의 파일들을 의미

• 브라우저의 렌더링 과정 ( 간단 )
  1. URI에 해당하는 서버에 리소스를 요청한다.
  2. 요청받은 리소스를 이용해서 HTML로 DOM, CSS로 CSSOM을 생성한다.
  3. DOM과 CSSOM을 결합하여 렌더트리를 생성한다.
  4. 요청받은 리소스를 이용해서 JavaScript로 AST를 생성한다.
  5. AST를 바이트코드로 변환한 후 DOM과 CSSOM의 변화를 적용하고 렌더트리를 생성한다.
  6. 렌더트리를 기반으로 레이아웃을 결정하고, 화면에 페인팅한다.
  

• 한줄요약 : 서버에 리소스 요청후 리소스를 컴퓨터가 이해할 수 있는 바이트코드로 변환후 화면에 출력해주는 것을 브라우저의 렌더링이라고 한다

2. HTML 파싱과 DOM 생성

리소스로 받아온 HTML은 순수한 텍스트이다.
순수한 텍스트는 브라우저가 이해할 수 없기 때문에 DOM으로 변환하는 것이다.
이 때 DOM으로 변환하는 과정을 파싱이라고 하며, DOM은 자료구조(객체)이다.

• DOM 생성과정
  1. HTML을 읽어서 메모리에 저장함
  2. <mata>의 charset의 값을 기준으로 인코딩 방식을 정함
  3. 메모리에 저장된 값을 토큰으로 분해함
  4. 각 토큰을 기준으로 노드를 생성함
  5. 이 노드들의 관계를 각각 지정하여 트리형태의 자료구조를 생성함, 이것을 DOM이라고 부름

• 한줄요약 : HTML을 파싱해서 노드를 생성하고 노드를 트리자료구조로 생성한 것을 DOM이라고 부름

3. CSS 파싱과 CSSOM 생성

DOM을 생성하던 도중에 <link>나 <style>을 만나면 DOM생성을 중지하고 CSS를 파싱한다.
CSSOM 생성과정은 DOM과 비슷하게 진행된다. ( 생략 )

4. 렌더 트리 생성

DOM과 CSSOM을 결합하여 렌더 트리를 생성한다.
렌더 트리를 이용해서 레이아웃을 계산하고, 화면에 그리는 페인팅이 처리된다.
이후 DOM이나 CSSOM이 JavaScript에 의해서 변환되는 경우에 레이아웃계산과 페인팅이 재실행된다.

5. 자바스크립트 파싱과 실행

DOM생성중에 <script src="">를 만나면 일시중지하고 JavaScript코드로 AST를 생성한다.

• AST생성 순서
  1. 토크나이징: 어휘 분석을 통해 토큰들로 분해함.
  2. 파싱: AST생성함.
  

5.1 async

JavaScript로드와 HTML파싱이 같이 이루어지며, JavaScript실행시에만 HTML파싱이 일시중지된다.

5.2 defer

JavaScript로드와 HTML파싱이 같이 이루어지며, HTML파싱이 모두 끝나고 JavaScript실행이 시작된다.

• <script async src="app.js">
• <script defer src="app.js">