# Rendering ### TL;DR 1. HTML을 파싱해 DOM 노드로 구성된 트리(**DOM**) 생성 2. CSS를 파싱해 CSS 노드로 구성된 트리(**CSSOM**) 생성 3. DOM과 CSSOM 트리를 결합해 **렌더 트리** 생성 4. 렌더 트리를 기반으로 **레이아웃/리플로우** 과정 실행 5. 각 노드를 화면에 **페인팅** ### DOM 생성 브라우저의 렌더링 엔진이 가장 먼저 수행하는 작업은 Document Object Model, DOM 트리를 생성하는 것이다. HTML 파일을 DOM 트리로 파싱하는 과정은 총 4단계로 구성된다.

1. **바이트 인코딩**: 디스크 또는 네트워크에서 HTML의 원시 바이트를 읽고, 파일에 지정된 인코딩 방식(ex. UTF-8)에 따라 변환한다. 2. **토큰화**: 변환된 문자열을 HTML5 표준에 따라 고유한 토큰(ex. ``, ``)으로 변환한다. 3. **객체화**: 각 토큰을 속성이 정의된 객체로 변환한다. 4. **DOM 구성**: 원본 마크업의 포함 관계 등을 고려해 트리 구조를 생성한다. #### 잘못 작성된 HTML ```html

Front-end Developer Zero ``` 위의 코드는 HTML 파일의 시작 지점인 `` 태그를 정의하지 않았고, 닫는 태그(``, `

`)를 지정하지 않았다. 이는 문법적으로 틀린 코드이지만, HTML 파서는 자동으로 문법에 맞게 마크업을 수정한다. 위의 코드를 브라우저에서 실행시켰을 때의 모습이다. ```html

Front-end Developer Zero

``` #### 외부 자원 HTML 파서는 이미지, CSS 등의 논블로킹 자원을 발견하면, 해당 자원을 요청하고 구문 분석을 계속한다. 하지만 `