[WEB] 브라우저 동작 원리

이 글을 통해 주소창에 ex. ( www.tistory.com)  을  입력한 경우, 어떤 일련의 과정을 거쳐 해당 페이지가 화면에 보이는지에 대한 작동원리를 소개하고자 한다.

 

 

브라우저의 주요 기능

브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표현하는 것. 자원의 주소는 URI를 통해 전달된다.

 

브라우저 구성요소

유저인터페이스

사용자가 기능을 쉽게 이용할 수 있도록 만든 UI요소들(주소표시줄, 이전/다음 버튼, 북마크 메뉴 등)

브라우저 엔진

유저인터페이스와 렌더링 엔진 사이의 동작을 제어함

렌더링 엔진

요청한 콘텐츠를 표시 하는 역할 , html 파일을 요청하면 html, css를 파싱하여 화면에 표시해줌

통신

네트워크 호출에 사용

UI 백엔드

브라우저의 기본 장치 , os에 따라 UI가 바뀜

자바스크립트 해석기

자바스크립트 코드를 파싱하고 실행하는 역할

자료 저장소

쿠키와 같은 자료들을 저장하는 계층

렌더링 엔진

사용자가 요청한 정보를 서버에서 받아 화면에 표시하는 역할

동작과정

 - 통신으로  부터 요청한 문서의 내용을 얻음 - 로더가 로딩

 - html 문서 파싱 - 서버로 부터 받은 문서를 브라우저가 이해하고 사용할 수 있는 구조(DOM트리)로 문서를 변환하는 과정

 - css 문서 파싱 - css 모든 정보를 스타일 구조체로 생성(cssom)

 - html 문서 파싱과, css 문서 파싱의 결과를 결합하여 렌더링 트리를 생성함

 - 화면의 정확한 요소에 화면 배치를 함

 - UI 백엔드가 화면에 그리기 과정을 함

 - 화면에 표시 

 

웹킷 동작 과정