Critical Rendering Path 브라우저 렌더링에 대해서

김진영·2023년 4월 22일
1
post-thumbnail

“Don’t confuse positioning with design-y motion.”

브라우저 렌더링 과정은 웹 애플리케이션의 성능과 관련이 있으므로 중요한 개념입니다.
하지만 스터디원이 네이버 홈페이지가 어떻게 그려지는지 질문을 했을때 깔끔하게 답하지 못했습니다. 😂
그런 의미에서 브라우저가 화면을 어떻게 렌더링 하는지 깔끔하게 정리해보려 합니다.

브라우저 구조

우선 브라우저의 구조부터 살펴보겠습니다.
브라우저는 다음의 7가지 구조로 이루어져 있습니다.

  1. 사용자 인터페이스(User Interface)
    • 주소 표시줄, 이전/다음/새로고침 버튼 등
    • 사용자와 상호 작용하는 영역
  2. 렌더링 엔진(Rendering Engine)
    • HTML/CSS를 파싱한 결과(= 웹 페이지)를 화면에 표시
  3. 브라우저 엔진(Browser Engine)
    • 사용자 인터페이스와 렌더링 엔진을 연결
  4. 네트워크 통신(Networking)
    • 네트워크 요청을 수행
  5. UI 백엔드(UI Backend)
    • 체크박스 같은 기본 위젯을 표시
  6. 자료 저장소(Data Persistence)
    • 로컬스토리지, 쿠키
    • 보조 기억장치에 데이터를 저장
  7. 자바스크립트 엔진(Javascript Engine)
    • 자바스크립트 코드를 실행하는 인터프리터
    • 크롬의 경우, V8 엔진

렌더링 엔진

브라우저의 일곱 요소 중 렌더링 엔진에 대해 집중적으로 살펴보겠습니다.
렌더링 엔진은 2가지 역할을 합니다.

  1. HTML/CSS/JS/이미지 등 웹 페이지의 모든 요소를 화면에 표시
  2. 화면 요소들에 대해 업데이트가 필요할 때, 효율적인 렌더링을 위한 자료구조를 생성

화면 요소들이 업데이트 된다는 것은 유저의 동작이 발생한 경우를 의미합니다.
유저의 동작은 입력이 발생하거나 화면 스크롤이 발생한 경우를 포함합니다.

🍀 Critical Rendering Path

브라우저의 렌더링 엔진은 다음 동작 과정을 통해 위 2가지 역할을 수행합니다.

1. Parsing

HTML과 CSS 파일을 파싱해 DOM 트리CSSOM 트리를 생성합니다.

조금 더 자세히 살펴보겠습니다.
HTML 코드의 각 태그는 HTML5 표준에 지정된 고유 '토큰'으로 변환됩니다.(토큰화)
이후 토큰은 각각의 속성 및 규칙을 정의하는 '노드 객체'로 변환됩니다.(렉싱)
그리고 각 노드 객체 사이에 연관성이 존재하도록 'DOM 트리'가 생성되는 것입니다.

2. Style

DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구성합니다.
이 렌더 트리를 바탕으로 요소들이 화면에 표시됩니다.
렌더 트리는 화면에 표시되는 노드의 컨텐츠, 스타일 정보를 포함합니다.
이때 'display: none;'과 같은 스타일 정보를 갖는 노드들은 렌더트리에서 제외됩니다.
(따라서 'display: none;' 스타일 정보를 갖는 노드들은 화면에 표시되지 않습니다.)

3. Layout(a.k.a. Reflow)

각 노드 객체들의 뷰포트 내 크기와 위치를 계산합니다.
만약 요소의 크기 값을 상대 단위(%, em)로 지정했다면 픽셀 단위로 변환합니다.

4. Paint

Layout 단계에서 계산된 값을 바탕으로 각 노드들을 화면상의 실제 픽셀로 변환합니다.
이때 픽셀로 변환된 결과물들은 단일 레이어가 아닌 여러 레이어로 관리됩니다.

5. Composite

Paint 단계에서 생성된 레이어를 합성합니다.
이때 생성된 결과물이 실제 화면에 표시됩니다.

화면이 업데이트 된다?

화면이 업데이트 되는 3가지 시나리오가 있습니다.

  1. Layout 단계부터 재발하는 경우
    • 요소의 크기나 위치가 바뀌는 경우 혹은 브라우저 창 크기가 바뀌는 경우를 의미합니다.
    • 바뀐 크기와 위치 값을 계산하고 이를 바탕으로 다시 Paint, Composite 단계를 거쳐야 합니다.
  2. Paint 단계부터 재발하는 경우
    • 배경 이미지, 텍스트 색상, 그림자 등 레이아웃의 수치(요소 크기나 위치값)를 바꾸지 않는 스타일이 변경되는 경우를 의미합니다.
    • Layout 단계부터 재발하는 경우보다 성능상 이점이 있습니다.
  3. Composite 단계부터 재발하는 경우
    • 레이어의 합성만 발생하기 때문에 나머지 두 시나리오 보다 성능상 이점이 있습니다.

예를 들면 특정 요소의 width와 height을 변경하면 Layout 단계부터 재실행 됩니다.
따라서 애니메이션 동작을 구현하기 위해서는 width와 height 값을 변경하는 구현 방식은 지양하는 편이 좋습니다.
대신에 transform 속성을 사용하면 전자보다 렌더링 성능을 높일 수 있습니다.
Layout 단계부터 리렌더링이 발생하지 않기 때문입니다.

💁🏻 참고

https://csstriggers.com/
https://mygumi.tistory.com/238
https://wit.nts-corp.com/2020/06/05/6134
https://medium.com/@ArthurFinkler/css-animations-translate-vs-absolute-positioning-and-background-position-dd39fbdeade5

profile
기록해서 남길래요

0개의 댓글