웹 브라우저가 HTML, CSS, JavaScript 등 웹 리소스를 받아 화면에 표시하는 전체 과정을 브라우저 렌더링 파이프라인이라고 합니다. 이 과정은 크게 다음과 같은 7단계로 나눌 수 있습니다:
브라우저의 렌더링 과정
1. 리소스 요청 및 응답 (웹 페이지 리소스 요청 및 다운로드)
브라우저는 서버에서 HTML, CSS, JavaScript 등의 리소스를 다운로드한 후, 이를 파싱하여 렌더링을 위한 트리를 생성한다.
2. HTML 파싱 -> DOM 생성
브라우저는 HTML 파일을 바이트 단위로 읽고, 문자(character) → HTML 토큰(token) → DOM(Document Object Model) 트리로 변환합니다.
<script>태그를 만나면 기본적으로 실행이 완료될 때까지 HTML 파싱이 중단<link>태그를 만나면 CSS 파일을 비동기적으로 다운로드하고, HTML 파싱은 계속 진행- 각 HTML 태그는 트리 형태로 구조화된 노드로 구성되며, 부모-자식 관계를 형성
3. CSS 파싱 -> CSSOM 생성
브라우저는 CSS 문서를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
CSS 파일 역시 바이트로 전송되므로, 바이트 → 문자 → CSS 토큰 → CSS 규칙 → CSSOM 순으로 변환됩니다.
CSSOM은 각 요소에 어떤 스타일이 적용되는지를 구조화한 트리로, 렌더링 과정에서 DOM과 결합하여 요소의 최종 스타일을 결정합니다.
CSS 규칙
- 선택자(selector) = 선택자는 스타일을 적용할 HTML 요소를 정의
- 선언(declaration) = 적용할 스타일을 정의
4. 렌더 트리 생성
브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.
이 과정에서 브라우저는 레이아웃과 페인팅에 필요한 정보를 추출하고, display: none, head 같은 숨겨진 요소나 비표시 요소는 제외됩니다.
5. 레이아웃 (Reflow)
브라우저는 렌더 트리의 각 요소의 위치와 크기를 계산하여 뷰포트 내에서의 정확한 배치를 수행합니다.
요소의 정확한 위치와 크기를 결정하는 단계로, 뷰포트 크기, 폰트 크기, 박스 모델 등이 영향을 미치고 화면 사이즈가 변하거나 DOM 구조가 변경되면 레이아웃을 다시 계산(Reflow) 하게 됩니다.
리플로우는 성능에 영향을 줄 수 있으므로 이를 최소화하는 것이 중요합니다.
6. 페인팅 (Repaint)
브라우저는 요소들의 색상, 텍스트, 그림자 등을 적용하여 실제 화면에 시각적으로 그리는 과정입니다. 이 과정에서 브라우저는 CSS 스타일, 배경, 그림자, 그림 등을 고려하며, 여러 계층으로 구성된 렌더링 요소들을 하나의 이미지로 합치는 과정도 포함됩니다.
페인팅은 화면에 표시될 그래픽 요소를 생성하는 과정이기 때문에, 이 과정도 성능에 큰 영향을 줄 수 있습니다. 특히, 복잡한 그래픽이나 애니메이션이 포함된 경우 페인트 작업이 많아져 성능이 저하될 수 있습니다.
**
7. 합성 (Compositing)
브라우저는 화면에 그려질 요소들을 각각의 레이어(layer)**로 분리하고, GPU를 활용하여 레이어들을 결합하여 최종 화면을 구성합니다.
transform과 opacity와 같은 속성은 레이아웃이나 페인트 과정을 거치지 않고, 이 컴포지팅 단계에서만 처리됩니다. 이 덕분에 이러한 속성을 사용하는 애니메이션은 더 부드럽고 빠르게 실행될 수 있습니다. 컴포지팅 단계는 GPU 가속을 활용하여 성능을 최적화하고, 화면에 최종적으로 표시되는 결과를 빠르게 생성하는 데 중요한 역할을 합니다.
렌더링 성능 최적화 포인트
Reflow 최소화
- 레이아웃 변경을 줄이고 transform이나 opacity 활용
- DOM 변경 시 여러 개의 변경을 한 번에 처리
- display: none을 자주 사용하지 않기
Repaint 최소화
- 색상 변경 등 불필요한 스타일 변경 줄이기
- 애니메이션을 will-change 속성과 함께 사용
렌더링 차단 리소스 줄이기
- CSS 파일을 최소화하고 async 또는 defer를 활용해 스크립트 로드 최적화
- 웹폰트 사용 시 font-display: swap을 설정하여 텍스트 블로킹 방지
파일 최적화
- CSS, JS 파일 최적화
- IMG 최적화
정리
브라우저 렌저링 과정
브라우저 렌더링 파이프라인은 웹 리소스를 받아 화면에 표시하는 과정으로, 다음 단계로 구성됩니다
1. 리소스 요청: HTML, CSS, JS 등의 리소스를 서버에서 다운로드합니다.
2. HTML 파싱: HTML을 파싱해 DOM 트리를 생성하며,<script>태그는 파싱을 차단할 수 있습니다.
3. CSS 파싱: CSS를 파싱해 CSSOM 트리를 만듭니다.
4. 렌더 트리 생성: DOM과 CSSOM을 결합해 화면에 표시할 요소로 렌더 트리를 구성합니다.
5. 레이아웃: 요소의 크기와 위치를 계산합니다(Reflow).
6. 페인팅: 스타일과 색상을 적용해 화면에 그립니다(Repaint).
7. 합성: 레이어를 GPU로 결합해 최종 화면을 출력합니다(Compositing).
성능 최적화를 위해 Reflow와 Repaint를 최소화하고,transform이나opacity를 활용하며,async/defer로 리소스 로드를 최적화합니다.
DOM과 CSSOM의 차이점은 무엇인가요?
DOM(Document Object Model)은 HTML 문서의 구조를 트리 형태로 표현한 객체 모델로, 요소와 속성을 나타냅니다. CSSOM(CSS Object Model)은 CSS 규칙을 트리 형태로 구조화한 것으로, 각 요소에 적용된 스타일 정보를 담고 있습니다. 둘은 렌더 트리 생성 시 결합되어 최종 스타일과 구조를 결정합니다.
DOM은 JavaScript로 조작 가능하며, CSSOM은 스타일 계산에 주로 사용됩니다. 예를 들어, document.getElementById는 DOM을 조작하고, getComputedStyle은 CSSOM을 참조합니다.
Reflow와 Repaint의 차이와, 이를 최소화하는 방법은
Reflow는 요소의 크기나 위치를 계산하는 레이아웃 단계로, DOM 구조 변경이나 뷰포트 크기 변화로 발생합니다. Repaint는 색상, 그림자 등 시각적 스타일을 그리는 단계입니다. Reflow는 Repaint를 포함하지만, Repaint는 Reflow 없이도 가능합니다.최소화 방법
1. transform이나 opacity를 사용해 레이아웃 변화를 줄임.
2. DOM 변경을 배치 처리(한 번에 적용).
3. will-change로 브라우저 최적화를 유도.
<script>태그가 렌더링을 차단하는 이유와 해결 방법은?
<script>태그는 JavaScript가 DOM을 변경할 수 있으므로, 브라우저는 스크립트 실행이 끝날 때까지 HTML 파싱을 멈춥니다. 이를 렌더링 차단(Render Blocking)이라고 합니다.
해결 방법
1. async: 스크립트를 비동기적으로 로드해 파싱과 병렬 처리.
2. defer: 스크립트를 파싱 후 실행(DOMContentLoaded 시점).
3.<script>를 <body> 끝에 배치.
합성(Compositing)이 다른 단계와 다른 점은?
합성은 레이어를 GPU로 결합해 최종 화면을 그리는 단계로, Reflow나 Repaint 없이 처리됩니다. transform이나 opacity 같은 속성은 합성 단계에서만 작동해 성능이 뛰어납니다.
합성은 GPU 가속을 활용하므로 애니메이션에 적합. 하지만 레이어를 너무 많이 만들면 메모리 사용량이 증가할 수 있음.
렌더 트리와 DOM 트리의 차이는?
DOM 트리는 HTML의 모든 요소를 포함한 트리 구조입니다. 렌더 트리는 DOM과 CSSOM을 결합해 화면에 실제로 표시될 요소만 포함하며, display: none이나<head>같은 비표시 요소는 제외됩니다. 렌더 트리는 레이아웃과 페인팅에 최적화된 구조로, 브라우저가 화면 그리기에 필요한 정보만 추출.
JavaScript가 렌더링 파이프라인에 미치는 영향은?
JavaScript는 DOM과 CSSOM을 동적으로 변경할 수 있어 렌더링 파이프라인에 영향을 줍니다.<script>태그는 파싱을 차단하며, 실행 중 DOM 수정은 Reflow와 Repaint를 유발할 수 있습니다. 비동기 로드(async/defer)나 requestAnimationFrame을 사용해 렌더링 성능을 최적화할 수 있습니다.
브라우저가 CSS를 비동기적으로 로드한다고 했는데, 구체적으로 어떻게 동작하나요?
<link>태그로 로드된 CSS는 비동기적으로 다운로드되며, HTML 파싱과 병렬로 진행됩니다. CSSOM이 완성되기 전까지 렌더링이 지연될 수 있지만, 브라우저는 FOUC(Flash of Unstyled Content)를 방지하기 위해 스타일이 적용될 때까지 화면 표시를 보류합니다.
preload나 media 속성을 사용해 로드 우선순위를 조정 할 수 있습니다.
렌더링 성능 최적화를 위해 실무에서 주로 사용하는 기법은?
Reflow 최소화: transform, opacity로 애니메이션 구현, DOM 변경 배치 처리.
Repaint 최소화: will-change로 최적화, 불필요한 스타일 변경 줄임.
리소스 최적화: CSS/JS 압축, 이미지 최적화, async/defer로 스크립트 로드.
웹폰트 최적화: font-display: swap으로 텍스트 블로킹 방지.
Critical Rendering Path(CRP)란 무엇인가요?
Critical Rendering Path는 브라우저가 HTML, CSS, JS를 처리해 화면에 첫 번째 픽셀을 그리는 데 필요한 최소 경로입니다. HTML 파싱 → CSSOM 생성 → 렌더 트리 → 레이아웃 → 페인팅 단계를 포함하며, 리소스 로드와 JS 실행이 이 경로를 지연시킬 수 있습니다.
CRP를 최적화하려면 중요 CSS를 인라인화하고, 비중요 리소스를 비동기 로드해야 합니다.
GPU 가속이 합성 단계에서 어떻게 작용하나요?
합성 단계에서 GPU는 레이어를 독립적으로 처리하고 결합해 빠르게 화면을 렌더링합니다. transform, opacity 같은 속성은 GPU로 처리되어 CPU 부하를 줄이고 부드러운 애니메이션을 제공합니다. 하지만 레이어 수가 많아지면 메모리 사용량이 증가하므로 적절한 레이어 관리가 필요합니다..
