HTTP 프로토콜을 이용해 우리는 서버와의 통신을 하고, 그 내용을 HTML 문서(프로토콜) 등을 통해서 전달 받는다.
서버에서 받은 HTML 문서 등을 이용하여 웹브라우저 랜더링을 통하여 클라이언트 화면을 그린다
서버에서 받은 자원을 어떻게 클라이언트의 화면에 그리는지 알아 보자.
브라우저의 요청에 의해 서버가 응답한 HTML문서는 문자열로 이루어진 순수한 텍스트이다.
바이트(네트워크 통신)→문자→토큰(문법적 의미의 최소단위)→노드(객체)→DOM(Document Object Model:최종결과물) 순의 변환 과정을 거친다.
이러한 텍스트를 시각적인 픽셀로 렌더링하려면 HTML 문서를 브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장해야 한다.
사용자 인터페이스(UI)
요청한 페이지를 보여주는 창을 제외한 모든 부분으로 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등등이 이에 해당한다
브라우저 엔진
브라우저 엔진의 주된 역할은 HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 상호작용적인 시각 표현으로 변환시키는 것이다.
단순히 화면을 표시하는 렌더링 엔진보다는 검색 엔진등이 추가 되는 약간 넓은 개념이라고도 볼수 있다.
렌더링 엔진(레이아웃 엔진)
요청한 컨텐츠를 표시하는 역할을 하며,HTML과 CSS를 파싱(해석)하여 화면에 표시한다.
다만 자바스크립의 경우는 별도의 자바스크립트 엔진이 존재한다..
웹 브라우저에서 2개의 엔진은 공유되는 DOM 자료 구조를 통해 조화롭게 동작한다.
통신
HTTP 요청과 같은 네트워크 호출에 사용되고, 플랫폼의 독립적인 기능이며 각 플랫폼의 하부에서 실행된다
UI 백엔드
글 입력 폼등의 기본적인 장치를 그린다.
플랫폼에서 명시하지 않은 인터페이스로 OS 사용자 인터페이스 체계를 사용한다
자료 저장소
자료를 저장하는 계층으로 쿠키나 로컬 스토리지등의 자료가 저장되는 저장소이다. 이는 하드디스크에 저장되며 HTML명세등도 이곳에 저장된다