[Web] 브라우저 렌더링

웹 브라우저

웹 브라우저란?

웹 브라우저는 인터넷 상의 다양한 정보를 사용자에게 제공하고 웹 페이지와 상호작용할 수 있도록 돕는 소프트웨어다.

 

웹 브라우저는 단순히 텍스트나 이미지를 보여주는 것을 넘어서 복잡한 애플리케이션을 실행하고 사용자 경험을 개선하기 위해 여러 작업을 수행한다.

웹 브라우저의 구조

• 사용자 인터페이스

    • 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

 

• 렌더링 엔진

    • HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진

 

• 브라우저 엔진

    • 유저 인터페이스와 렌더링 엔진을 연결하는 엔진

 

• 통신

    • HTTP 요청과 같은 네트워크 호출에 사용되는 네트워킹 파트

 

• UI 백엔드

    • 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔트 파트

 

• 자료 저장소

    • 로컬스토리지나 쿠키와 같이 보조 기억장치에 데이터를 저장하는 파트

 

• 자바스크립트 해석기

    •자바스크립트 코드를 실행하는 인터프리터

 

 

 

렌더링 엔진

렌더링 엔진의 목표

1. HTML, CSS, JavaScript, 이미지 등의 요소를 화면에 정확히 표시

    • 사용자가 보는 화면은 이러한 요소들의 종합적인 결과물이다. 따라서 모든 콘텐츠가 올바르게 표시되는 것이 중요하다.

 

2. 사용자 동작에 따른 업데이트를 효율적으로 처리

    • 웹 페이지에서 사용자 상호작용으로 인해 콘텐츠가 변경될 경우 필요한 부분만 갱신하여 렌더링 효율을 높인다.

렌더링 엔진의 동작 과정

렌더링 엔진은 웹 페이지를 사용자에게 표시하기 위해 여러 단계를 거친다. 이 과정을 Critical Rendering Path라고 하며 다음과 같은 단계로 구성된다.

 

 

1. DOM Tree와 생성

• HTML 문서를 파싱하여 DOM 트리를 생성한다. DOM 트리는 HTML 요소와 그 속성을 노드로 표현하며 계층적인 트리 구조를 가진다.

2. CSSOM Tree 생성

• CSSOM TreeCSS 규칙의 우선순위와 상속 규칙도 이 과정에서 적용된다.
• CSS 파일을 파싱하여 CSSOM 트리를 생성한다. CSSOM 트리는 DOM 요소에 적용할 스타일 정보를 계층적으로 나타낸다.

3. Render Tree 생성

DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 렌더 트리는 화면에 표시될 요소들만 포함한다.

 

4. 레이아웃

렌더 트리의 각 요소가 화면에서 차지할 위치와 크기를 계산하는 과정이다.

 

CSS 박스 모델을 기반으로 뷰포트에 따라 상대적 크기와 위치를 픽셀 단위로 변환한다.

 

5. 페인트

요소의 색상, 텍스트, 이미지 등을 화면에 그리는 과정이다.

 

이 단계에서 렌더 트리의 정보를 바탕으로 실제 픽셀 데이터가 생성된다.

 

6. 합성

페인트 단계에서 생성된 레이어를 합성하여 최종적으로 화면에 표시한다.

 

레이어는 독립적으로 처리되기 때문에 성능을 최적화할 수 있다.