웹사이트 렌더링은 어떻게 되는가?

 

웹사이트에 접속하면 HTML, CSS, JS 파일이 전송되고, 그것을 브라우저가 읽어서 우리에게 보기 좋게 만들어 준다.

그렇다면 그 과정을 상세히 알아보자.

 

1. Object Model 만들기

먼저 브라우저가 HTML과 CSS 파일을 받으면 이를 각각 DOM, CSSOM으로 변환한다.

DOM은 이전에 알아본 것처럼 HTML의 요소들을 트리구조로 만든 것이다.

 

 

CSSOM은 CSS Object Model로 CSS의 DOM이라고 할 수 있다.

 

이 때 중요한 것은 DOM과 CSSOM은 서로 독립적인 데이터 구조라는 것이다.

 

2. 렌더링 트리 생성

하지만 완전 별개의 DOM과 CSSOM으로는 홈페이지를 보여줄 수 없다.

따라서 이 별개의 모델을 서로 합쳐줘야 한다.

 

이때 이둘은 DOM을 기준으로 태그에 맞는 CSSOM의 오브젝트를 가져오는 방식으로 합쳐진다.

 

3. 레이아웃(reflow) 진행

이미 CSSOM으로 스타일을 정해줬지만, 이런 스타일은 사용자의 화면 픽셀에 따라 달라질 수 있다.

따라서 상대적인 값(%같은)들과 화면 크기에 의해 찌그러지는 픽셀들의 크기가 다시 한번 절대적인 픽셀로 정의된다.

 

4. 페인트(rasterizing) 진행

이제 모든 요소들의 세부사항이 정해졌으므로 실제 픽셀로 변환하고 화면에 띄우게 된다.