브라우저 렌더링

렌더 트리 를 기반으로 브라우저는 화면을 렌더링한다.
(렌더 트리 = DOM + CSSOM)
여기서 DOM은 HTML을 파싱한 자료구조고, CSSOM은 CSS를 파싱한 자료구조다.

과정

1. 브라우저가 서버에게 페이지를 요청한다. (Request)
   

2. 서버가 브라우저에게 페이지 정보를 보낸다. (Response)
   

3. 렌더링 엔진이 HTML 파일을 파싱하면서 DOM이 생성되기 시작한다.

   Response의 body가 아래의 HTML 파일이라고 가정하자.
   

   브라우저와 서버는 Network Interface Layer에서 바이너리 코드로 통신한다.
   따라서, 그림의 HTML 파일은 문자 변환 부분에 해당한다.

   바이너리 코드는 아래의 순서를 거쳐 DOM으로 변환된다.
   바이너리 코드 -> 문자 변환 -> 토큰 생성 -> 노드 생성 -> DOM

   참고로 렌더링 엔진은 Content-Type을 보고, 바이너리 코드가 utf-8 형식으로 인코딩된 HTML 파일이라는 것을 알아낸다.
   이를 디코딩하여 HTML 파일로 변환한다.

   

4. 파싱을 진행하다가 script tag를 만나면 DOM 생성을 멈추고, 제어권을 자바스크립트 엔진에게 넘긴다.

   그럼 자바스크립트 파싱이 시작되면서 AST 가 생성된다.
   자바스크립트 파싱에 대해선 다른 포스팅에서 자세히 설명하겠다.

   자바스크립트 파싱이 끝나면 나머지 HTML 파싱이 진행된다.

   

5. CSSOM도 DOM과 같은 방식으로 생성되고, 이 둘을 결합하여 렌더 트리를 만든다.
   (바이너리 코드 -> 문자 변환 -> 토큰 생성 -> 노드 생성 -> CSSOM)

   style.css 가 다음과 같다고 가정하자.
   

   아래는 생성된 CSSOM이다.

   

   그리고 렌더 트리가 생성된다.
   

6. 렌더 트리를 기반으로 화면의 레이아웃을 계산한다. 계산이 끝나면 화면에 페인트한다.

   

   DOM API로 DOM이나 CSSOM을 수정하면 렌더 트리가 재생성된다.

   레이아웃을 다시 계산해야 하는 상황을 리플로우라 하고, 다시 화면에 그려야하는 상황을 리페인트라 한다.
   리플로우와 리페인트는 성능에 영향을 주므로 최대한 지양하는 것이 좋다.