브라우저가 웹페이지를 렌더링하는 방식: Reflow, Paint, Repaint의 심층 분석

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 대상자: 프론트엔드 개발자, 웹 성능 최적화에 관심 있는 개발자
• 난이도: 중급 이상 (렌더링 프로세스와 성능 최적화 기술에 대한 이해 필요)

핵심 요약

• Reflow(레이아웃 재계산): 요소의 크기/위치 변경 시 브라우저가 전체 레이아웃을 재구성하는 과정
• Paint(픽셀 채우기): 색상, 테두리, 텍스트 등 시각적 요소를 화면에 렌더링하는 단계
• Repaint(재그리드): 시각적 변화만 발생할 때, 레이아웃 재계산 없이 픽셀만 업데이트하는 과정

섹션별 세부 요약

1. 웹페이지 렌더링 프로세스

• HTML 파싱 → DOM 트리 생성
• CSS 파싱 → CSSOM 트리 생성
• DOM과 CSSOM 병합 → 렌더 트리 생성
• 레이아웃 계산 → 요소의 크기와 위치 결정
• Paint → 색상, 텍스트, 그림자 등 시각적 요소 렌더링
• Composite → 최종 화면에 모든 요소 합성

2. Reflow의 트리거 조건

• 요소의 크기/위치 변경 (예: Read more 버튼 클릭 시 추가 콘텐츠 삽입)
• DOM 구조 변경 또는 CSSOM 업데이트
• 브라우저가 레이아웃을 다시 계산해야 하는 모든 상황

3. Paint와 Repaint의 차이

• Paint: 모든 시각적 요소를 처음부터 렌더링 (예: 페이지 로딩 시)
• Repaint: 텍스트 색상, 불투명도, 가시성 변경 시 발생 (예: 라이트모드 ↔ 다크모드 전환)
• Repaint는 레이아웃 계산을 생략하고 픽셀만 갱신

4. 성능 최적화 팁

• Reflow를 줄이기 위해 transform, opacity, filter 등 레이아웃에 영향을 주지 않는 속성 사용
• 여러 DOM 변경 작업을 하나의 requestAnimationFrame 또는 batching으로 묶기
• will-change 속성으로 브라우저에게 예측 가능한 변화를 알리기

결론

• 핵심 팁: Reflow를 유발하는 CSS 속성은 피하고, repaint만으로 처리 가능한 변경은 color, opacity 등 사용
• 실무 적용: Read more 버튼 클릭 시 콘텐츠 추가 시, height: auto 대신 max-height로 전환하는 방식으로 레이아웃 재계산을 방지할 수 있음
• 결론: 렌더링 프로세스 이해는 웹 성능 최적화의 기초이며, 이를 통해 사용자 경험을 개선할 수 있음