Critical Rendering Path 에 대하여

Notice

Recent Posts

Recent Comments

Tags more

Archives

관리 메뉴

즐겁게, 코드

🎨 프론트엔드

Chamming2 2021. 1. 31. 13:19

HTML, CSS, 자바스크립트.

과연 셋의 조합이 어떻게 웹 페이지를 만들어내는 걸까요?

오늘은 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보도록 하겠습니다.

이름이 크리티컬하다고 겁먹지 마세요. CRP는 HTML 코드를 실제 페이지로 만드는 일련의 과정입니다.

전체적인 순서는 위 도식과 같은데요, 이제부터는 각 단계에서 일어나는 일을 소개하겠습니다.

(※ 이번 글은 페이지 렌더링 프로세스에 관한 글로써 자바스크립트 실행 및 처리 과정은 제외했습니다.)

우리가 열심히 짠 HTML 코드를 브라우저가 받아들면 제일 먼저 DOM 트리를 생성합니다.

트리라... 우리가 알고 있는 그 트리가 맞나요?

맞습니다! <body>, <div> 등 HTML 태그들을 DOM 노드로 만들고 자료구조 시간에 배운 것처럼 트리 형태로 구성한 결과물입니다.

하얀 바탕에 검은 텍스트만 가득하면 보기 싫으니 이제 CSS를 처리할 차례입니다.

CSS도 HTML과 마찬가지로 CSSOM 노드를 생성하고 트리를 구성하는데요, 한 가지 특이한 점이 있습니다.

바로 상위 노드의 스타일 속성을 하위 노드들이 그대로 물려받는다는 것으로, 이렇게 위에서부터 아래로 밀려 내려온다는 점이 CSS(Cascading Style Sheet) 이라는 이름이 붙은 이유 중 하나라고 하네요. 😄

HTML과 CSS의 구조를 파악했으니 이제 이 둘을 조합할 차례입니다.

두 트리를 하나의 트리로 만들기 위해 브라우저는 DOM 트리와 CSSOM 트리를 합친 후 렌더링 트리 라는 트리에 복사합니다.

(한 가지 재미있는 점은, CSSOM 중 display: none 이라는 속성을 발견할 시 아예 렌더링 트리에 복사하지 않고 다음 노드를 복사합니다.)

레이아웃 단계에서는 화면(뷰포트)의 너비를 감지하고각 요소들의 위치와 크기를 계산합니다.

레이아웃 단계를 돕기 위한 메타 태그 속성이 하나 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 이 그것으로, 이 태그가 있어야만 브라우저는 <html> 태그의 너비를 기기의 너비에 맞춥니다.

만약 HTML에 해당 태그가 존재하지 않는다면, 브라우저는 화면의 너비를 고정값 980px로 인식해 반응형 스타일을 적용할 때 어려움이 있을 수 있습니다.

페인트 단계는 렌더링 트리를 기반으로 화면에 실제 픽셀을 찍는 단계입니다.

당연하지만, 적용할 CSS가 적을수록 성능이 향상됩니다!