렌더링이란 HTML, CSS, JS코드가 브라우저를 통해 화면에 출력되는 과정을 말한다.

1. Render트리 생성

• 브라우저는 HTML과 CSS를 받아 DOM트리와 CSSOM트리를 만든다.
• 그리고 DOM트리와 CSSOM트리를 합친 Render 트리가 생성된다.

2. Layout과정

• Render 트리를 어디에 배치할 지 결정한다.
• 예를 들어 CSS에서 %나 rem, em을 사용했다면 뷰포트 크기에 따라 정확한 px단위로 변환하는 것이다.

3. Paint

• 그렇게 배치된 Render트리의 요소, 텍스트, 이미지들이 유저에게 보여진다.