브라우저 렌더링 과정



브라우저 (browser)

→ 인터넷을 통해 웹 페이지에 접근하고, 그래픽, 텍스트, 멀티미디어 등을 표시하는 소프트웨어

  • 웹 페이지를 해석하고 화면에 표시하는 역할
  • 다양한 운영체제 및 플랫폼 지원
  • 사용자 경험 형성 및 쉬운 웹 탐색 도움

ex) Chrome, Firefox, Torch, Safari, Internet Explorer, MS Edge



렌더링 과정

브라우저 렌더링 과정

1. HTML 파싱

웹 페이지의 HTML 문서를 파싱하여 DOM 트리를 생성. 이 과정에서 HTML 태그, 요소, 속성을 인식하고 계층 구조로 구성

2. CSS 파싱

CSS 파일 및 스타일 정보를 파싱하여 CSSOM 생성. CSSOM은 각 HTML 요소에 대한 스타일 정보를 제공

3. 렌더링 트리 구축

DOM 트리와 CSSOM을 결합하여 렌더링 트리를 생성. 렌더링 트리는 화면에 실제로 렌더링될 요소만을 포함하며, 레이아웃과 스타일 정보를 고려

  • render tree render tree 구조

4. 레이아웃

렌더링 트리를 기반으로 각 요소의 크기, 위치, 및 레이아웃을 계산. (이러한 단계를 리플로 라고도 함)

5. 페인팅

화면에 나타날 내용을 그리기 위해 브라우저는 렌더링 트리를 기반으로 각 요소를 페인팅 (이 단계를 리페인트 또는 리페인팅이라고도 함)

6. 화면 갱신

최종적으로 화면에 내용이 갱신되고 사용자가 볼 수 있게 됨