[Computer Science] 브라우저 렌더링 과정

브라우저란?

• 우리가 흔히 인터넷 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말한다.
• 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램
• 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여준다.

---

브라우저의 기본 구조

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

---

브라우저 렌더링 동작 과정

렌더링의 기본적인 동작 과정

1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.
2. 두 Tree를 결합하여 Rendering Tree를 만든다.
3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다.
4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.
5. 레이어를 합성하여 실제 화면에 나타낸다.

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

1. 사용자가 주소표시줄(사용자 인터페이스)에 URI를 입력한다.
2. 브라우저 엔진에게 URI(입력받은 주소값)을 전달한다.
3. 브라우저 엔진은 URI(입력받은 주소값)에 해당하는 데이터를 자료저장소에서 먼저 찾아본다.
4. 자료저장소에 값이 없는 경우 렌더링 엔진에게 URI값을 전달
5. 렌더링 엔진은 3번에 값이 있다면 그에 대한 데이터를 분석하고, 없어서 추가 데이터 요청이 필요하다면 URI(입력받은 주소값)을 통신레이어에 전달한다.
6. 통신레이어에게 전달 > 서버에 html,css,javascript 값을 서버에 요청한다.
7. 통신레이어에게 전달받은 html,css는 렌더링 엔진이 파싱 (DOM Tree, CSSOM Tree 구축) 한다.
8. 통신레이어에게 전달받은 javascript를 통신레이어가 자바스크립트 해석기에게 전달해서 해석하고 해석된 결과가 6번에서 파싱된 DOM Tree를 조작한다.
9. 조작이 완료된 DOM node(DOM Tree 구성요소)는 render object(render tree 구성요소)로 변한다.
10. UI 백엔드에 전달되어 render object가 화면에 그려진다.