브라우저 동작 원리

브라우저란

사용자가 웹 페이지를 탐색하고 상호작용할 수 있도록 하는 소프트웨어
우리가 보는 웹 페이지는 서버에서 준비해 두었던 것을 "받아서"브라우저에게 전달해 "그려주는" 역할을 수행합니다!

 

주소창에 naver.com을 입력하면 일어나는 일

1. URL 주소를 DNS 서버에서 검색해 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달합니다.
2. 브라우저는 HTTP 프로토콜을 이용해 요청 메세지를 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용해 서버에 전송송됩니다.
3. 서버는 response 메세지를 생성해 다시 브라우저에게 데이터를 전송합니다.
4. 브라우저는 response를 받아 파싱 하여 화면에 렌더링 합니다.

 

렌더링 과정 

브라우저 렌더링은 HTML, CSS, JavaScript 등의 문서를 서버에서 받아와 웹 페이지를 화면에 그리는 과정입니다.

1. 브라우저는 HTML 파일을 파싱 하여 DOM(문서 객체 모델) 트리를 구축합니다.
2. 이후, CSS 파일을 파싱하여 CSSOM(문서 객체 모델) 트리를 구축합니다.
3. 이 두 개의 트리를 결합하여 렌더 트리(Render Tree)를 구축합니다.
4. 렌더 트리는 화면에 실제로 표시되는 요소들로 구성되어 있습니다.
5. 렌더 트리는 레이아웃을 계산하고 브라우저에서 화면에 표시됩니다.

1. DOM 트리와 CSSOM 트리 생성

- 웹 브라우저는 HTML 문서를 받아 파싱해 DOM(Document Object Model) 트리를 구축합니다.

- DOM 트리는 웹 페이지의 구조(HTML 요소, 속성, 텍스트 등)를 노드로 포함하며, 트리 구조로 표현됩니다.

- 동시에 CSS 파일도 분석해 CSSOM 트리를 생성합니다.

- CSSOM 트리는 DOM 트리와 유사한 구조로 이루어져 있으며, 스타일 정보를 포함합니다.

 

2. 렌더 트리의 생성과 레이아웃 계산

- DOM 트리와 CSSOM 트리가 구축되면, 브라우저는 이를 결합해 렌더 트리(Render Tree)를 생성합니다.

- 렌더 트리는 실제로 화면에 그려질 요소들만 포함하며, 각 요소의 스타일 정보를 반영합니다.
  왜냐하면 렌더 트리는 화면에 표시되지 않는 요소들(예: display: none)을 제외합니다.

- 렌더 트리를 기반으로 브라우저는 요소의 위치, 크기, 색상 등을 계산해 렌더링 합니다.

3.  페인팅과 리플로우/리페인트

- 레이아웃 계산이 끝나면 페인팅 과정이 시작되면서 이 단계에서는 렌더 트리의 각 요소를 화면에 그리게 됩니다.

- 이후 자바스크립트에 의해 요소의 스타일이나 내용이 변경되면, 브라우저는 리플로우(레이아웃 재계산)와 리페인트(화면 재그리기) 과정을 거칩니다.

 

리플로우
- 요소의 너비, 높이, 위치, 등이 변경되어 렌더트리를 재생성하는 작업.

1. DOM 요소 속성이 변경될 때 (width, height 등)
2. JS에서 DOM 관련 메소드, 속성에 접근할 때
3. 브라우저 사이즈가 변할 때

 

리페인트
- 변경된 요소를 화면에 그려주는 작업

1. 리플로우가 발생했을 때
2. 요소의 스타일이 변경됐을 때
3. visibility: hidden <-> visible 변경될 때

 

 

---

용어 정리 

 

DNS 

도메인 이름 시스템은 사람이 읽을 수 있는 도메인 이름 (예: https://naver.com)을 머신일 읽을 수 있는 IP 주소로 변환합니다.

IP 주소로 변환하는 과정에 개입하는 것이 DNS 입니다.

HTTP(HyperText Transfer Protocol) 

TCP 기반의 클라이언트와 서버 사이에 이뤄지는 요청/응답 프로토콜

프로토콜

통신하기 위한 약속들을 기술적으로 정의해 둔 것

TCP

두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 네트워크 프로토콜.

 

 

---

출처

Frontend-Interview-Questions/Notes/important-5/what-happens-when-type-google.md at main · Esoolgnah/Frontend-Interview-Question

웹 브라우저의 렌더링 과정 이해하기