웹브라우저 동작 원리 (웹킷 메인플로우)

브라우저는 월드와이드웹에서 정보를 검색, 표현, 탐색하기 위한 소프트웨어로
서버와 http로 정보를 주고받을 네트워크 모듈과 특정 정보로 이동할 주소 입력창,
서버에서 받은 데이터를 해석해주는 파서, 데이터를 화면에 뿌려주는 렌더링엔진이 포함되어 있다.
브라우저마다 다른 엔진을 사용하고 크롬은 렌더링엔진으로 Blink를 사용한다. 

 

웹킷 메인플로우

 

 

html을 해석해서 DOM (Document Objectj Model) Tree를 만들고 Css를 해석해서 CSS Tree를 만든다. 
이 과정에서 Parsing 과정이 필요하며 토큰 단위로 해석되는 방식은 일반 소스코드의 컴파일 과정이다.

DOM Tree 와 CSS Tree는 연관되어 있으므로 Render Tree로 재조합되고 화면에 배치할 크기, 위치 정보를 담아 조합된다.
그 후 Painting과정을 거쳐 display된다.