Browser’s Rendering Process

browser elements

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

자 이제 Browser Rendering 은 어떻게 이루어지는지 알아보자

Browser Rendering Process
사용자가 주소표시줄(사용자 인터페이스)에 URI를 입력

브라우저 엔진에게 URI(입력받은 주소값) 전달

브라우저 엔진은 URI(입력받은 주소값)에 해당하는 데이터를 자료저장소에서 먼저 찾아본다.

같은 데이터를 받아오면는 낭비를 방지하기 위해 자주 받아오는 데이터를 저장해두고 사용하기 때문 (캐싱)

이로인해 효율적인 렌더링을 사용 할 수 있다.

( Web Storage > localStorage, sessionStorage, Cookie )

4-1. 자료저장소에 값이 없는경우 렌더링 엔진에게 URI값을 전달

4-2. 렌더링 엔진은 3번에 값이 있다면 그 대한 데이터를 분석하고,
없어서 추가 데이터 요청이 필요하면 URI(입력받은 주소값)을 통신레이어에 전달한다.

통신레이어에게 전달 > 서버에 html,css,javascript 값을 서버에 요청