브라우저의 렌더링

렌더링이란 HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

브라우저 별로 렌더링을 수행하는 렌더링 엔진이 다르다

• 크롬 : 블링크
• 사파리 : 웹킷
• 파이어폭스 : 게코

렌더링 과정

1. DOM 트리 생성

https://miro.medium.com/max/720/0*rkjgCl-RSVTvRGgS

HTML 문서를 파싱 후, DOM 트리를 생성한다.

DOM

• Document Object Model
• 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있도록 브라우저가 트리구조로 만든 문서 객체 모델
• DOM은 HTML과 자바스크립트를 이어주는 역할

파싱

• 런타임 환경이 실행할 수 있도록 변환하는 것
• 문서의 내용을 토큰으로 분석하고, 문법적 의미와 구조를 반영한 파스 트리를 생성하는 것

2. CSSOM 트리 생성

CSS를 파싱 후, CSSOM 트리를 생성한다.

CSSOM

• CSS를 파싱하여 구조화한 자료
• DOM처럼 CSS의 내용을 해석하고 노드를 만든 트리 구조

3. 렌더 트리 구성

생성된 DOM 트리와 CSSOM 트리를 조합하여 렌더링 트리를 생성한다.

렌더링 트리에는 페이지를 렌더링하는데 필요한 노드만 포함

4. 레이아웃

뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산

5. 페인팅

레이아웃 단계를 통해 얻은 계산결과를 기반으로 화면을 그린다.

• 리플로우 : 변경사항을 반영하기 위해 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것
• 리페인트 : 리플로우 결과를 화면에 그려줌