[Web] 랜더링이란 무엇인가?

 

 

개발자라면 한번정도 들어봤을 단어이자 면접 단골질문인 CSR과 SSR에 대해 자세히 알아보려한다.

CSR(클라이언트 사이드 랜더링)과 SSR(서버 사이드 랜더링)을 알아보기 앞서 랜더링에 대해 자세히 알아보자:)

 

 

 

 

랜더링이란 무엇일까?

랜더링이란 HTML, CSS, JS 등 개발자가 작성한 코드가 브라우저에 출력되는과정을 의미한다

크롬은 블링크(blink) 등 각 브라우저는 랜더링을 수행하는 랜더링 엔진을 가지고 있다

 

사용자가 웹페이지에 접속하면 아래와 같은 랜더링 과정을 통해 다음과 같은 순서에 따라 랜더링이 이루어진다.

1. DOM 트리, CSSOM 트리 생성
2. 랜더링 트리 생성
3. 레이아웃
4. 페인팅

 

 

조금 더 자세히 알아보자면

 

1.1) DOM 트리 생성

먼저, HTML 코드가 DOM 트리로 변환된다, 브라우저는 다음과 같이 마크업을 처리한다

1. 변환
2. 토큰화
3. 렉싱
4. DOM 생성

 

1.2) CSSOM 트리 생성

DOM 트리 생성과정과 똑같이 CSSOM 트리도 생성한다

 

 

2) 랜더링트리 생성

DOM트리와 CSSOM트리를 결합하여 랜더링트리를 생성한다

랜더링트리란 페이지를 랜더링하는데 필요한 노드들로 이루어져 있다

 

 

 

3) 레이아웃

뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 box 모델이 출력

즉, 각 노드들의 위치, 크기 등을 모두 계산하는 과정

 

 

4) 페인팅

렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환

즉, 레이아웃 단계까지 모든 계산이 완료되면 화면에 요소를 그리는 것이다