[TECH-QA] 브라우저 렌더링 과정

Posted 3 months Updated 3 months

By 베짱이가 되고싶은 개미。

브라우저의 HTML 렌더링은 웹 페이지를 화면에 표시하기 위해 브라우저가 HTML, CSS, JavaScript 등의 리소스를 처리하고 시각적으로 표현하는 과정입니다. 이 과정은 브라우저의 렌더링 엔진(예: Chrome의 Blink, Firefox의 Gecko, Safari의 WebKit)에 의해 수행되며, 여러 단계로 나눌 수 있습니다. 아래에서 이 과정을 자세히 설명하겠습니다.

브라우저 렌더링 과정의 개요

브라우저는 HTML 문서를 받아 화면에 렌더링하기 위해 다음 주요 단계를 거칩니다.

HTML 파싱 및 DOM 생성
CSS 파싱 및 CSSOM 생성
렌더 트리(Render Tree) 생성
레이아웃(Layout, Reflow)
페인팅(Painting)
컴포지팅(Compositing, 선택적)

이 과정은 Critical Rendering Path(CRP, 중요 렌더링 경로)라고 불리며, 웹 페이지 로딩 속도와 사용자 경험에 직접적인 영향을 미칩니다.

HTML 파싱 및 DOM 생성

HTML 파싱: 브라우저는 서버로부터 받은 HTML 파일을 바이트 단위로 읽어 문자를 해석하고, 이를 토큰(예: 태그, 속성, 텍스트)으로 변환합니다. 이 토큰들은 트리 구조로 조직화됩니다.
DOM(Document Object Model) 생성: 파싱된 HTML은 계층적 트리 구조인 DOM으로 변환됩니다. DOM은 HTML 요소와 그 관계를 나타내는 객체 모델로, 각 요소는 노드로 표현됩니다.
- 예) <div><p>Hello</p></div>는 <div>와 <p>가 부모-자식 관계로 DOM 트리에 추가됩니다.

비동기 리소스 처리: HTML 파싱 중 <script>, <img>, <link> 등의 외부 리소스를 만나면 브라우저는 해당 리소스를 병렬적으로 요청합니다. 단, <script> 태그는 기본적으로 파싱을 차단(blocking)할 수 있으므로 async 또는 defer 속성을 사용하는 것이 일반적입니다.

CSS 파싱 및 CSSOM 생성

CSS 파싱: HTML 파싱과 병렬적으로, 브라우저는 <link> 태그나 <style> 태그를 통해 CSS 파일 또는 스타일을 읽습니다. CSS도 토큰화되고 파싱되어 트리 구조로 변환됩니다.
CSSOM(CSS Object Model) 생성: 파싱된 CSS는 CSSOM이라는 트리 구조로 저장됩니다. CSSOM은 각 요소에 적용될 스타일 규칙(예: color, margin)을 정의합니다.
CSS는 계층적이며, 상속과 우선순위(예: !important, 선택자 특이성)에 따라 스타일이 결정됩니다.
렌더링 차단: CSS는 렌더링을 차단하는 리소스입니다. CSSOM이 완성되기 전에는 화면 렌더링이 시작되지 않으므로, CSS 파일을 최적화(예: 최소화, 인라인 CSS 사용)하는 것이 중요합니다.

렌더 트리(Render Tree) 생성

DOM과 CSSOM 결합: 브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 렌더 트리는 화면에 실제로 표시될 요소들만 포함합니다.
- 예) display: none이 적용된 요소나 내부의 메타데이터는 렌더 트리에 포함되지 않습니다.
렌더 트리는 각 노드에 대해 스타일 정보(예: 색상, 크기)와 구조적 정보를 포함합니다.
렌더 트리의 역할: 렌더 트리는 레이아웃 단계에서 요소의 크기와 위치를 계산하는 데 사용됩니다.

레이아웃(Layout, Reflow)

박스 모델 기반 계산: 렌더 트리의 각 노드는 CSS 박스 모델(콘텐츠, 패딩, 테두리, 마진)을 기반으로 크기와 위치를 계산합니다.
뷰포트 기준 배치: 브라우저는 뷰포트(화면 크기)를 기준으로 요소의 정확한 위치(x, y 좌표)와 크기(width, height)를 결정합니다.
- 예: position: absolute는 부모 요소를 기준으로, float는 주변 콘텐츠 흐름에 따라 배치됩니다.
리플로우(Reflow): 레이아웃 계산은 초기 렌더링뿐만 아니라 DOM이나 CSS 변경(예: JavaScript로 스타일 변경, 창 크기 조정) 시에도 발생할 수 있습니다. 리플로우는 성능에 큰 영향을 미치므로 최소화해야 합니다.

페인팅(Painting)

픽셀 변환: 레이아웃 단계에서 계산된 렌더 트리를 기반으로, 브라우저는 각 요소를 화면의 픽셀로 변환합니다.
- 색상, 그림자, 텍스트, 이미지 등 시각적 스타일이 적용됩니다.
레이어(Layer): 복잡한 페이지에서는 요소를 여러 레이어로 나누어 페인팅합니다.
예) transform이나 opacity를 사용하는 요소는 별도의 레이어로 처리될 수 있습니다.
GPU 가속: 현대 브라우저는 GPU를 활용해 페인팅을 가속화합니다. CSS 속성 중 will-change를 사용하면 특정 요소의 렌더링을 최적화할 수 있습니다.

📝 will-change를 사용한 CSS 애니메이션 최적화

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>will-change 예시</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      position: relative;
      transition: transform 0.3s ease;
      /* 브라우저에 transform 변경을 미리 알림 */
      will-change: transform;
    }

    .box:hover {
      transform: translateX(200px); /* 마우스 호버 시 이동 */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>




  
  will-change 예시

will-change: transform;: 브라우저에 .box 요소의 transform 속성이 변경될 것임을 알려, 해당 요소를 GPU 레이어로 승격시켜 렌더링을 가속화합니다.
효과: 마우스를 .box 위에 올리면 요소가 부드럽게 200px 오른쪽으로 이동합니다. will-change로 인해 브라우저는 이 변환을 미리 준비하여 렌더링 성능을 최적화합니다.
주의사항
- will-change를 과도하게 사용하면 메모리 사용량이 증가할 수 있으므로, 실제로 애니메이션이나 변경이 빈번한 요소에만 적용하세요.
- 애니메이션이 끝난 후에는 will-change를 제거하는 것이 좋습니다(예: JavaScript로 동적으로 추가/제거).

📝 스크롤 애니메이션

.scroll-element {
  position: fixed;
  top: 0;
  will-change: transform;
  transition: transform 0.5s ease;
}

/* JavaScript로 스크롤 시 transform 변경 */
document.addEventListener('scroll', () => {
  document.querySelector('.scroll-element').style.transform = "translateY(${window.scrollY}px)";
});

이 경우, will-change: transform은 스크롤에 따른 요소 이동을 GPU로 처리하여 부드러운 렌더링을 보장합니다. will-change는 GPU 가속을 활용해 애니메이션이나 전환 성능을 개선하지만, 적절히 사용해야 리소스 낭비를 피할 수 있습니다. 위 예시는 transform에 초점을 맞췄지만, opacity, scroll-position 등 다른 속성에도 적용 가능합니다.

컴포지팅(Compositing, 선택적)

레이어 합성: 페인팅된 레이어를 최종적으로 합쳐 화면에 표시합니다. 컴포지팅은 GPU를 활용해 빠르게 수행됩니다.
애니메이션 최적화: transform이나 opacity 같은 속성은 레이아웃이나 페인팅을 유발하지 않고 컴포지팅 단계에서만 처리되므로 성능이 좋습니다.
성능 고려: 컴포지팅은 리플로우나 리페인팅보다 비용이 적으므로, 애니메이션에 적합한 속성을 사용하는 것이 중요합니다.

박스 모델과의 연관성

CSS 박스 모델은 렌더링 과정, 특히 레이아웃 단계에서 핵심적인 역할을 합니다

각 HTML 요소는 박스 모델(콘텐츠, 패딩, 테두리, 마진)을 기반으로 사각형 박스로 계산됩니다.
레이아웃 단계에서 브라우저는 박스 모델의 속성(width, height, margin, padding, border)을 사용해 요소의 크기와 위치를 결정합니다.
box-sizing 속성은 박스 크기 계산 방식(content-box vs border-box)을 정의하며, 레이아웃의 예측 가능성에 영향을 미칩니다.

다음은 간단한 HTML과 CSS로 렌더링 과정을 보여주는 예제입니다:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 200px;
      height: 100px;
      margin: 20px;
      padding: 10px;
      border: 5px solid blue;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div>Hello, World!</div>
</body>
</html>

HTML 파싱: <div>와 텍스트가 DOM 트리로 변환됩니다.
CSS 파싱: 스타일이 CSSOM으로 변환됩니다.
렌더 트리: <div>와 스타일이 결합된 렌더 트리가 생성됩니다.
레이아웃: 박스 모델을 기반으로 <div>의 크기(230px × 130px, content-box 기준)와 위치가 계산됩니다.
페인팅: <div>의 배경색, 테두리, 텍스트가 화면에 그려집니다.

추가 고려사항

Progressive Rendering: 브라우저는 모든 리소스가 로드되기 전에 부분적으로 렌더링을 시작할 수 있습니다. 이를 통해 사용자에게 더 빠르게 콘텐츠를 보여줄 수 있습니다.
Web Vitals: Google의 Core Web Vitals(LCP, FID, CLS)는 렌더링 성능을 측정하는 지표로, 최적화 목표로 사용됩니다.

- LCP(Largest Contentful Paint): 주요 콘텐츠 렌더링 시간.
- FID(First Input Delay): 사용자 입력에 대한 응답성.
- CLS(Cumulative Layout Shift): 레이아웃 이동의 안정성.