브라우저의 기본 구조와 렌더링 과정

브라우저의 기본 구조

1. 사용자 인터페이스 (UI)

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

2. 브라우저 엔진

사용자 인터페이스(UI)와 렌더링 엔진을 연결함

사용자가 UI 주소표시줄에 URI를 입력하면, URI를 전달받은 브라우저 엔진이 자료 저장소에서 해당 URI에 알맞는 자료를 찾는다.
그리고 해당 자료들을 렌더링 엔진에 전달한다.

만일 자료 저장소에 저장된 자료들이 없다면, 브라우저 엔진은 URI값만 렌더링 엔진에 전달한다.

3. 렌더링 엔진

브라우저 엔진으로부터 전달받은 HTML과 CSS를 파싱하여 요청한 웹페이지를 표시한다.

4. 통신

HTTP요청과 같은 네트워크 요청을 수행함.

서버에서 받은 URI에 해당하는 응답 데이터를 렌더링 엔진에게 돌려주는 역할.

5. UI 백엔드

체크박스나 버튼과 같은 기본적인 위젯을 그려줌.

6. 자바스크립트 해석기

자바스크립트 코드를 해석하고 실행.

7. 자료 저장소

localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 자료저장소.
자주 받아오는 자료를 저장해두어 서버에 반복적으로 요청하는 작업을 줄임.
캐싱(Caching)이 이루어지는 곳.

 

렌더링 과정

1. 브라우저는 HTML, CSS, JS 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.

 

2. 브라우저 렌더링 엔진은 응답된 HTML을 파싱 후, object model로 만든다.

• HTML → DOM
• CSS → CSSOM

3. DOM과 CSSOM을 합쳐 render tree를 만든다.

 

4. layout

렌더트리가 만들어졌으면 이것을 토대로 그려질 노드와 그의 스타일값 그리고 치수까지 계산한다.

(즉, 브라우저 화면의 어떤 위치에 어떤 크기로 출력될지 계산 하는 단계)

 

5. paint

이 정보들을 페인팅 단계로 전달해서 렌더트리의 각 노드를 화면 상 실제 픽셀로 변환한다.

---

* 브라우저의 렌더링 과정에서 렌더링 엔진이 사용되는 때는?

위 과정 중 2번부터 5번까지가 대체로 렌더링 엔진의 주요 작업 범위다.

---

렌더링 엔진이란 무엇이고, 렌더 트리를 만들고 레이아웃을 만드는 과정에서 발생할 수 있는 최적화 기법은?

렌더링 엔진은 웹브라우저가 html을 사람이 읽을 수 있는 문서로 표시하는 소프트웨어다.
렌더 트리를 만들고 레이아웃을 만드는 과정에서 발생할 수 있는 최적화 기법으로는, 리플로우와 리페인트를 최소화할 수 있는 속성 사용, 영향을 주는 노드를 최소화하기 위한 속성 사용, 프레임 줄여서 리플로우 연산 비용 줄이기 등이 있다.

렌더링 과정에서 특정 액션이나 이벤트에 따라 레이아웃 수치가 변경되면 레이아웃 과정을 다시 수행하게 되는 리플로우와, 그 결과물을 다시 화면에 그려주는 리페인트를 거친다.

---

리플로우와 리페인트가 발생하는 것은 어떤 상황에서인가? 또한, 이 두 과정을 최소화하기 위한 방법에는 어떤 것들이 있을까?

 

리플로우와 리페인트는 액션이나 이벤트 발생으로 변경된 레이아웃 정보를 기반으로 발생한다.
이 두 과정을 최소화화려면 레이아웃 변경이 최소화돼야하고, 레이아웃 변경을 최소화하기위해 리페인트만 발생하는 속성을 사용하고, 프레임을 줄여서 리플로우 연산 비용을 줄일 수 있다.

 

 

참고자료

https://1yoouoo.tistory.com/4

https://velog.io/@wiostz98kr/브라우저-렌더링-과정과-최적화-방법

https://velog.io/@grinding_hannah/Web-브라우저-작동-원리