브라우저의 렌더링 과정

 

웹페이지는 미리 만들어지느 것을 가져오는게 아니라 실시간으로 그려지는 것에 가깝다. 실시간으로 웹사이트가 그려지는 과정, 이 과정을 웹 브라우저의 렌더링 과정이라고 말한다.

 

 

 

1. 브라우저의 기본 구조

---

브라우저의 기본 구조

 

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.

 

• 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
• 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
• 렌더링 엔진 - 요청한 콘텐츠를 표시
  • 예를 들어, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시
• 통신 - HTTP 요청과  같은 네트워크 호출에 사용된다. 
  • 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다.
• UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.
• 자바 스크립트 해석기 - 자바스크립트 코드를 해석하고 실행한다.
• 자료 저장소 - 자료를 저장하는 계층

 

 

 

 

 

2. 주소창에 주소 입력 시 발생

---

서버에 요청을 보내기 위해 해당 서버의 IP주소를 알아야 한다. 하지만 사용자들은 사용하기 쉬운 https://naver.com 와 같은 도메인 주소를 사용한다.

따라서 도메인 주소에서 IP 주소를 알아내야 한다. 이 과정을 DNS (Domain Name System) 조회 라고 한다.

 

DNS 프로토콜을 사용해서 주소창에 넣은 URL의 IP 주소를 알아낸다. 

 

해당 IP 주소로 HTTP Request를 송신하고 서버로부터 HTTP Response를 응답받는다.

 

통상 HTTP Response 는 HTML 파일이다.

 

 

 

 

---

 

 

 

3. 렌더링 엔진

---

렌더링 엔진은 응답으로 받은 내용을 브라우저 화면에 표시해주는 역할을 한다.

 

 

 

(1) 전체적인 흐름

 

1. 서버에서 응답으로 받은 HTML 데이터를 파싱한다.
2. HTML을 파싱한 결과로 DOM Tree를 만든다.
3. 파싱하는 중 CSS 파일 링크를 만나면 CSS 파일을 요청해서 받아온다.
4. CSS 파일을 읽어서 CSSOM Tree(CSS Object Model)을 만든다.
5. DOM Tree 와 CSSOM이 모두 만들어지면 이를 기반으로 Render Tree를 생성한다.
6. Render Tree에 있는 각각의 노드들이 화면의 어디에 어떻게 위치할 지 계산하는 Layout 과정을 거친다.
7. 화면에 실제 픽셀을 Paint 한다