Browser’s Rendering Process

Browser elements

• 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 홈버튼, 새로고침/정지 버튼 등 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤 할 수 있는 부분.
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어한다.
• 렌더링 엔진 : 요청한 URI를 브라우저 엔진에게 받아서 server에게 요청한다(통신). server로 부터 URI에 해당하는 데이터(HTML, CSS, JavaScript)를 받아서 파싱한 후 렌더링한다.
• 통신 : 렌더링 엔진으로부터 HTTP 요청 등을 받아서 네트워크 처리 후 응답을 전달한다.(OS 단에서 실행)
• 자바스크립트 해석기 : JavaScript 를 파싱한다.
• 자료 저장소 : 쿠키 등의 자료를 컴퓨터 하드디스크에 저장한다.
• UI 벡엔드 : render tree를 browser 에 그리는 역할을 담당한다.

Browser Rendering Process

• 사용자가 사용자 인터페이스에 주소표시줄에 URI를 입력하여 브라우저 엔진에 전달한다.
• 브라우저 엔진은 자료 저장소에서 URI에 해당하는 자료를 찾고, 해당 자료를 쿠키로 저장했다면 그 자료를 렌더링 엔진에 전달한다.
• 렌더링 엔진은 브라우저 엔진에서 가져온 자료(HTML, CSS, image 등)를 분석한다. 동시에 URI 데이터를 통신, 자바스크립트 해석기, UI 백엔드로 전파한다.
• 또한 렌더링 엔진은 통신 레이어에 URI에 대한 추가 데이터(있다면)를 요청하고 응답할 때까지 기다린다
• 응답받은 데이터에서 HTML, CSS는 렌더링 엔진이 파싱한다.
• 응답받은 데이터에서 JavaScript는 JavaScript 해석기가 파싱한다.
• JavaScript 해석기는 파싱한 결과를 렌더링 엔진에 전달하여 3번과 5번에서 파싱한 HTML의 결과인 DOM tree을 조작한다.
• 조작이 완료된 DOM node(DOM tree 구성요소)는 render object(render tree 구성요소)로 변한다
• UI 벡엔드는 render object를 브라우저 렌더링 화면에 띄워준다.