브라우저 페이지가 렌더링 되는 과정에 대해 설명해주세요

Grace·2021년 9월 5일
6
post-thumbnail

프론트엔드 개발자라고 하려면 필수로 알아야 할 내용중 하나.
내가 작성한 코드가 페이지에 렌더링 되는 과정에 대해 알아야 한다.
이전에 올린 웹의 동작방식 포스팅에 이어서 브라우저 렌더링에 대해 알아보자.

www.google.com을 주소창에서 입력하면 일어나는 일


브라우저의 페이지가 렌더링 되기까지

렌더링이란?

렌더링이란, 개발자가 작성한 문서(html, css, javascript)를 브라우저에서
그래픽 형태로 출력하는 것을 말한다.

  • 엔진
    • 대부분의 브라우저는 렌더링을 수행하는 렌더링엔진을 가지고 있다.
    • 렌더링 엔진은 웹 표준에 따라 개발자들이 작성한 문서를 브라우저에 보여주긴 하지만, 브라우저마다 각각의 엔진을 사용하기 때문에 엔진마다 개발자가 의도한대로 웹페이지가 동작하지 않을 수도 있다.
      => 그렇기에 각 브라우저별로 자동테스트를 수행해서 호환성을 확인하는 작업이 필요하다.
    • 더 나은 사용자경험을 위해 가능한 빠르게 내용을 표시하게 만들어졌다.
      => 모든 html 파싱이 끝나기도 전에 이후의 과정을 수행하여 미리 사용자에게 보여줄 수 있는 일부분을 출력

🖥 렌더링 과정

1. 서버로부터 넘겨받은 HTML, CSS 파일을 다운로드

2. <Parsing> DOM / CSSOM 생성

HTML과 CSS파일은 단순한 텍스트로 되어있기 때문에
연산과 관리가 용이하도록 Object Model로 만들게 된다.

  • HTML은 DOM(Document Object Model) 생성
    문서 마크업의 속성 및 관계 포함
  • CSS는 CSSOM(CSS Object Model) 생성
    요소가 렌더링 될 때 어떻게 표시될지에 대한 내용

3. <Attachment> Render tree 구축

앞서 DOM/CSSOM이 생성되면, 이 둘을 이용하여 Render tree를 생성한다.
순수하게 텍스트로만 존재하던 이전단계와는 달리
Render tree에는 스타일 정보가 설정 되어있기에
실제 화면에 표시되는 노드들로만 구성되어있다.

📍 실제 화면에 표시되는 노드란 무얼 뜻하는 것일까?
▶️ css 속성중에 display: none같은 경우에는
화면에 어떤 공간도 차지하지 않기 때문에 Render tree 생성 과정에서 제외된다.
▶️ visibility: invisible속성은 비슷해보이지만,
요소가 눈에 보이지 않을 뿐, 공간을 차지하기 때문에 Render tree에 포함된다.

4. <Layout> Render tree 배치

이 단계에서는 브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산한다.
이 단계에서 %, vh, vw등 상대적인 위치나 크기의 속성은
실제 화면에 그려지는 px단위로 계산되어 변환된다.

📍 뷰포트(Viewport)란?
웹페이지가 브라우저 화면 상에 실제로 표시되는 영역을 말한다.
기기마다 창의 크기가 다르기 때문에 뷰포트크기 또한 달라지게 된다.
따라서 %, vh, vw등 상대적인 단위를 사용하게 되면
뷰포트 크기가 달라질 때마다 계산을 다시 해야된다.

5. <Paint>Render tree 그리기

이전 Layout단계에서 계산이 완료된 요소들(px)을 실제로 화면에 그리는 단계이다.
또한 이 단계에서 텍스트, 색상, 이미지, 그림자효과 등의 스타일요소들이 처리된다.
당연한 얘기겠지만,
스타일 요소가 복잡해질수록 paint 단계에서 소요되는 시간이 늘어나게 된다.

렌더링 최적화

추가적으로 렌더링 최적화에 대해서 정리해보고자 한다.

위의 과정을 다 거쳐서 최종적으로 브라우저에 렌더링이 완료되었다고 해서
모든 작업이 한번에 다 끝났다고 할 수 없다.

Reflow

어떤 이벤트나 액션에 따라서 html 요소의 크기나 위치가 바뀔 경우
그에 영향을 받는 자식/부모노드들을 포함하여 Layout 단계를 다시 수행하게 된다.
이렇게 될 경우 영향을 받는 요소들의 크기, 위치를 다시 계산하게 되는데
이 과정을 Reflow라고 한다.

Reflow가 일어나는 대표적인 상황들은,

  • 윈도우 resizing (viewport 크기 변경)
  • 노드의 추가, 또는 제거
  • 요소의 위치, 크기 변경 (left, margin, padding, border, width 등)
  • 폰트 변경, 이미지의 크기 변경

Repaint

렌더링 과정에서 말했듯이, Layout => Paint 순서로 렌더링이 일어나게 된다.
그렇기 때문에 Reflow가 일어났다고 해서 바로 렌더링이 일어나지 않는다.
Render tree에 그려주는 Paint과정이 있어야 하는데,
Paint과정이 다시 일어나는 것을 Repaint라고 한다.

Repaint 과정은 독립적으로도 일어날 수 있다.
레이아웃에 영향을 주지 않는 스타일 속성의 변경이 일어날 경우에는
Reflow를 수행 할 필요가 없기 때문에, Repaint만 수행하게 된다.


성능최적화를 위해 ReflowRepaint 연산을 줄이는 방법들이 있지만,
내가 직접 좀 더 경험해보고 정리하고 싶어서
우선은 여기까지 정리!

📌 참고하였습니다 :)
수정해야 할 부분이 있으면 댓글로 알려주시면 감사하겠습니다!

profile
쉽게 사는건 재미가 없더군요, 새로 시작합니다🤓

0개의 댓글