Programming/JS

웹 브라우저는 어떻게 화면에 그려질까? Critical Rendering Path

soyeori 2023. 6. 20. 21:46

성능최적화 방법을 공부하면서 렌더링에 대해 다시 공부해 보았다. 브라우저가 그려지는 과정과 DOM에 대한 개념, Reflow를 조금이라도 개선시킬 수 있는 방법을 정리해 보고자 한다. 글 내용과 관련된 개념은 아래 참고에 적혀있는 블로그와 책, 강의 등을 참고하여 작성하였다.

 

Critical Rendering Path

 

브라우저가 서버로부터 HTML 응답을 받고 화면에 그려지기까지의 시퀀스를 "Critical Rendering Path" 라고 한다. CRP에는 6단계가 있다.

 

  1. DOM 트리 생성
  2. CSSOM 트리 생성
  3. 자바스크립트 실행
  4. 렌더트리로 결합
  5. 레이아웃 그리기
  6. 페인팅

1. DOM(Document Object Model)트리 생성

 

브라우저 요청에 의해 서버에서 HTML파일을 받아오면 다음과 같은 과정으로 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.

  • 서버는 HTML 파일을 읽고 메모리에 저장한다.
  • 브라우저는 서버에서 HTML 문서를 바이트 형태로 응답받고, meta태그의 인코딩 방식을 기준으로 문자열로 반환한다.
  • 문자열로 변환된 HTML 문서를 읽고 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해한다.
  • 토큰들은 객체로 변환하여 노드를 생성한다. 노드는 DOM을 구성하는 기본 요소가 된다.
  • HTML요소는 중첩 관계, 즉 부자 관계를 형성하여 모든 노드들을 트리 자료구도로 구성한다.

이 노드들로 구성된 트리 자료구조를 DOM이라고 하며, DOM은 HTML문서를 파싱한 결과물이다.

 

2. CSSOM(CSS Object Model) 트리 생성

 

렌더링 엔진은 DOM을 생성하다가 CSS를 로드하는 link태그나 style태그를 만나면 DOM생성을 일시 중단한다. 그리고 CSS파일을 서버에 요청하고, HTML과 동일한 파싱 과정을 거쳐서 CSSOM을 생성한다. 이 과정이 완료되면 HTML파싱이 중단된 지점부터 다시 시작하여 DOM 생성을 재개한다. 

다시 말하면 CSS는 완전히 파싱이 끝나야 아래에서 설명하는 렌더트리를 만들 수 있다는 의미이다. HTML과는 다르게 CSS는 부분적으로 사용할 수 없고, 처음 입힌 스타일이 나중에 정의된 스타일에 의해 변경될 수 있다. 만약 stylesheet 전체를 파싱하기 전 이전에 정의된 스타일을 사용한다면 화면이 잘못 그려질 위험이 있다. 그러므로 CSS는 다음단계로 이동하기 전 완전히 파싱되어야 한다.

3. 자바스크립트 실행

자바스크립트는 CSSOM이 구성된 다음에 실행된다. CSS파싱과정과 마찬가지로 렌더링 엔진은 DOM을 생성하다가 script태그를 만나면 DOM생성을 일시 중단한다. 그리고 내, 외부 script파일을 파싱 및 실행하고, 이 과정이 완료되면 HTML파싱이 중단된 지점부터 다시 시작하여 DOM 생성을 재개한다. 자바스크립트 파싱과 실행은 브라우저의 렌더링 엔전이 아닌 자바스크립트 엔진이 처리하고, 자바스크립트를 해석하여 AST(추상적 구문 트리)를 생성한다. 

4. 렌더트리 생성

HTML과 CSS를 파싱하여 생성된 DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합된다. 그러므로 화면에 보여지는 콘텐츠로만 구성되어 있고, 화면에 비표시되는 부분(예: display: none), 보여지지 않는 부분(예: meta, script tag 등)은 포함하지 않는다.

5. 레이아웃 그리기

레이아웃은 뷰포트의 사이즈를 결정하고, HTML 요소의 레이아웃을 계산하여 위치를 그린다.

6. 페인팅

마지막으로 페인팅 단계에서는 페이지의 보여지는 콘텐츠를 픽셀로 변환하여 브라우저 화면에 표시한다.

 

이 모든 과정은 개발자 도구의 Perfomance 탭에서 확인할 수 있다. 페이지가 로드될 때 다음과 같은 이벤트 로그가 순차적으로 발생한다.

 

DOM은 무엇일까?

 

브라우저가 그려지는 단계를 확인해 보았는데, 이 중 HTML을 파싱해서 생성되는 DOM은 정확히 무엇일까? DOM에 대해 더 이해해 보고자 역으로 DOM이 아닌 것에 대해 나열해 본다.

 

1. DOM은 HTML 소스가 아니다.

DOM은 HTML문서를 파싱된 결과물이지만 완전히 동일한 것은 아니다. 예를 들어, <body> 태그가 빠진 HTML 소스는 브라우저에서 해당 태그를 올바르게 수정하여 DOM을 생성한다. 또한, 자바스트립트에 의해 동적으로 태그를 생성할 때 DOM은 추가된 태그를 업데이트해서 생성하지만 HTML 소스는 변경하지 않는다.

 

2. DOM은 브라우저에서 보이는 것이 아니다.

위의 렌더트리로 결합되는 과정에서 화면에 비표시되는 부분과 보이지 않는 부분은 렌더 트리에는 포함되지 않지만 DOM에서는 포함되어 있다. 예를 들어, display: none 스타일이 적용된 태그는 DOM에 해당 태그가 포함되어 있다.

 

3. DOM은 개발자도구 Element 탭에서 보이는 HTML이 아니다.

예를 들어, CSS 가상요소 (예: ::before)는 Element에서는 보이지만 DOM에 포함되지 않는다. 왜냐하면 DOM은 요소에 적용된 스타일을 포함하지 않기 때문이다.

 

정리하자면, DOM은 브라우저에서 뷰포트에 렌더링 할 항목을 결정하기 위한 첫 번째 단계이자, 자바스크립트에 의해 페이지 구조, 스타일, 콘텐츠 등을 변경하기 위해 사용된다.  

 

Reflow를 어떻게 개선할 수 있을까?

 

이처럼 자바스크립 실행으로 DOM API가 사용된다면 변경된 DOM과 CSSOM은 다시 렌더트리로 결합되고, 레이아웃과 페인트를 거쳐 브라우저의 화면에 다시 렌더링 하는데, 이를 리플로우(Reflow)와 리페인트(Repaint)라고 한다. 레이아웃을 다시 계산하고, 페인팅을 다시 해야 하는 것은 성능에 그리 좋지 않다고 한다. 

Reflow를 개선시키는 방법으로 이미지 등 데이터를 받아올 때, 이미지가 그려지는 위치를 고정시키는 방법이 있다. 먼저 위치를 고정시키지 않는다면 data가 들어오는 과정에서 간격이 벌어지게 되어 ux적으로도 보기 안 좋다. 대표적으로 유튜브와 같은 스켈레톤 UI가 적용된 사이트를 보면 페이지 로딩 시에 이미지에 대한 윤곽만 그려져 있는 상태이고 그다음에 Repaint가 일어나서 최종적으로 우리 눈에 보이는 화면이 만들어진다. 아래는 unsplash에서 사진을 검색하다가 캡쳐한 화면이다. 이미지가 들어올 곳에 레이아웃은 완성되어 있기 때문에 화면이 깨지지 않는다. 

 

 

이처럼 태그의 스타일 속성으로 크기를 고정시키는 등 리플로우를 개선한다면 레이아웃을 굳이 변경할 필요가 없고 리플로우 없이 리페인트만 실행되어 성능개선에 도움을 줄 수 있다.

 

참고