브라우저의 렌더링 과정

브라우저의 렌더링 과정

1. DOM Tree 생성

1.1 브라우저의 렌더링 엔진이 html 코드를 읽고 파싱한다.

2. CSSOM (CSSDOM) 생성

2.1 css파일 인라인 css 코드를 파싱한다

2.1 이 때 DOM 과 CSSOM 을 합쳐서 render Tree가 만들어진다.

3. Layout 단계

3.1 각 노드(html element) 들이 스크린에서 좌표에 따라 위치를 결정한다.

3.2 Position, size 등이 Layout 단계에서 결정 된다.

4. Paint 단계

4.1 실제로 화면에 그려지는 과정이다.