[웹 개발 지식] - 브라우저 렌더링 원리

브라우저 렌더링 원리

• 웹 브라우저는 HTML, CSS, JavaScript가 조화를 이루며 작동.
• 이처럼 각 요소가 올바르게 동작하도록 하려면, 브라우저가 이 코드들을 어떤 순서로 해석하고 처리하는지, 즉 렌더링 순서를 이해하는 것이 중요.
• 이를 통해 더 최적화된 코드를 작성 가능

 

브라우저 렌더링 단계 개념

HTML 파싱 및 DOM 트리 생성

• 서버로부터 받은 HTML 파일을 브라우저가 해석(파싱)해야 함 → HTML 파일은 문자열로 이루어져 브라우저 이해 불가능
• 파싱을 통해 HTML 파일 해석 → 페이지의 구조와 내용을 표현하는 DOM Tree로 변환하는 단계.
• 이 트리는 각 HTML 태그와 텍스트 노드를 계층 구조로 나타냄.

CSS 파싱 및 CSSOM 트리 생성

• HTML 문서에 포함되거나 외부에서 불러온 CSS 파일을 파싱.
• 스타일 규칙과 정보를 담은 CSSOM Tree를 생성.
• 이 트리는 각 요소에 어떤 스타일이 적용될지 결정하는 데 사용.

렌더 트리(Render Tree) 구성

• DOM 트리와 CSSOM 트리를 결합.
• 실제 화면에 표시될 요소들만을 포함하는 렌더 트리를 생성.
• 브라우저 화면에 보여지지 않는 것들 포함 X
  • display: none 속성, 렌더 트리 제외
  • visibility: hidden 속성, 렌더트리 포함

레이아웃(Layout 또는 Reflow)

• 렌더 트리를 바탕으로 각 요소의 위치와 크기를 계산하는 단계.
• 뷰포트(화면) 내에서 요소들이 어떻게 배치될지 결정.
• 이 단계에서는 박스 모델(Box Model)을 기반으로 상대적인 값들이 픽셀 단위로 변환.

페인트(Paint)

• 계산된 레이아웃 정보를 바탕으로 각 요소를 실제 픽셀로 변환하여 화면에 그리는 단계.
• 픽셀로 변환된 결과 → 하나의 레이어 x, 여러개의 레이어로 관리
• 요소의 색상, 배경, 텍스트, 테두리 등 시각적 스타일이 이 단계에서 렌더링 됨.

합성(Compositing)

• 복잡한 웹 페이지는 여러 레이어로 분리되어 처리.
• 브라우저는 각 레이어를 GPU와 협력하여 합성(composite)함으로써 최종 화면을 구성.

JavaScript가 DOM이나 스타일을 변경하면 다시 레이아웃(리플로우)나 페인트(리페인트)가 발생하여 화면이 업데이트 됨. 이러한 전체 과정을 ’중요 렌더링 경로(Critical Rendering Path)’라고 부르며, 웹 성능 최적화의 핵심.

 

브라우저 렌더링 순서

1. HTML 파일 수신 → HTML 파싱
   • 서버에게 HTML, CSS, JS 파일 요청
   • 브라우저는 서버로부터 HTML 파일을 받아 파싱하여 DOM 트리 생성.
2. CSS 파일 수신 → CSS 파싱
   • HTML 내에 포함된 또는 참조된 CSS 파일을 다운로드하고 파싱하여 CSSOM 트리 생성.
3. 렌더 트리 생성
   • DOM 트리와 CSSOM 트리를 결합해 실제로 렌더링 될 요소들만 포함하는 렌더 트리를 구성.
4. 레이아웃 (Layout) 계산
   • 렌더 트리의 각 요소의 위치와 크기를 계산하여, 화면 내에서 정확하게 배치.
5. 페인트 (Paint) 실행
   • 레이아웃 단계에서 계산된 정보에 따라 각 요소를 실제 픽셀로 그려서 화면에 렌더링.
6. 합성 (Compositing)
   • 여러 레이어로 구성된 페이지의 경우, 각 레이어를 GPU를 사용해 합성하여 최종적으로 화면에 출력.

 

렌더링 성능 최적화 방법

1. 불필요한 리소스 제거 및 파일 크기 최적화

• 파일 압축:
  • HTML, CSS, JavaScript 파일을 압축(minify)하여 불필요한 공백과 주석을 제거하면 전송 데이터의 크기가 줄어들어 로딩 시간이 단축.
• 이미지 최적화:
  • 이미지 포맷을 상황에 맞게 선택하고, 압축 도구를 사용해 파일 크기를 줄입니다. 또한, 반응형 이미지를 활용해 기기별 적절한 크기의 이미지를 제공할 수 있습니다.

---

2. 외부 리소스 로딩 최적화

• 비동기 및 지연 로딩:
  • <script> 태그에 async나 defer 속성을 사용하여 자바스크립트 파일이 HTML 파싱을 차단하지 않도록 합니다.
• 레이지 로딩(Lazy Loading):
  • 화면에 즉시 필요하지 않은 이미지나 동영상은 사용자가 스크롤할 때 로드되도록 하여 초기 렌더링 시간을 단축합니다.

---

3. CSS와 자바스크립트 최적화

• CSS 최적화:
  • 사용하지 않는 CSS를 제거하고, 복잡한 선택자나 중복된 스타일 규칙을 최소화하여 CSS 파싱 시간을 줄입니다.
• 자바스크립트 최적화:
  • DOM 조작을 한 번에 묶어서 실행하거나, 변경 사항을 배치(batch) 처리하여 리플로우(Reflow)와 리페인트(Repaint)의 빈도를 줄입니다.

---

4. 레이아웃 및 페인트 최적화

• 리플로우와 리페인트 최소화:
  • DOM 요소의 크기나 위치를 잦은 변경 없이 한 번에 적용하도록 코드를 작성합니다. 예를 들어, 스타일을 변경할 때 여러 번 직접 수정하기보다는 클래스를 추가/제거하는 방식으로 처리합니다.
• 변경 사항 캐싱:
  • DOM이나 레이아웃 관련 값을 미리 저장해두고, 반복 계산을 피함으로써 불필요한 계산을 줄입니다.

---

5. 합성 레이어 활용 및 GPU 가속

• 합성 레이어 분리:
  • 애니메이션이나 스크롤 등 자주 변경되는 요소에 will-change 속성을 지정하면, 브라우저가 해당 요소를 별도의 레이어로 분리하여 GPU를 통한 합성을 수행할 수 있습니다.
• GPU 가속 활용:
  • CSS transform과 opacity 같은 속성은 GPU 가속을 사용할 수 있으므로, 가능한 경우 이러한 속성을 활용해 렌더링 부하를 줄입니다.

---

6. 브라우저 캐싱 및 서버 최적화

• 캐시 활용:
  • HTTP 캐시 정책(Cache-Control, ETag 등)을 적절히 설정하여, 재방문 시 불필요한 리소스 재다운로드를 막습니다.
• 서버 압축:
  • 서버 측에서 GZIP이나 Brotli 압축을 적용하면 클라이언트로 전송되는 데이터 크기를 줄여줍니다.