[cs] 웹 브라우저의 구성

web이란? 

1990년에 팀버너스리가 만든 www(world wide web)

 

웹브라우저? 

- 웹 페이지 서버에 요청해서 서버의 응답을 웹문서 형태로 받는다. 

- 받은 웹문서(html, css 등)을 렌더링하여 모니터 화면에 웹페이지를 표시한다. 

 

사용자 인터페이스(user interface)

웹 브라우저의 화면(주소창, 새로고침버튼 등) 사용자와 상호작용하는 인터페이스

 

렌더링 엔진

브라우저 엔진으로 전달받은 HTML, CSS를 파싱하여 웹페이지를 표시한다.

만일 브라우저 엔진으로부터 URI값만 전달 받았다면, URI를 통신파트에 전달해 데이터를 받아오고, 

JS엔진을 통해 받아온 JS파일을 파싱한 후, 생성된 Render Tree를 UI백엔드 파트에 전달한다.

Safari는 Webkit, Firefox는 Gecko, Chrome은 Blink에 해당.

 

브라우저 엔진

UI와 렌더링 엔진을 연결하는 브라우저 엔진.
사용자가 UI 주소표시줄에 URI를 입력하면, URI를 전달받은 브라우저 엔진이 자료 저장소에서 해당 URI에 알맞는 자료를 찾는다.
그리고 해당 자료들을 렌더링 엔진에 전달한다.

만일 자료 저장소에 저장된 자료들이 없다면, 브라우저 엔진은 URI값만 렌더링 엔진에 전달한다.

 

자료저장소

localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 자료저장소.
자주 받아오는 자료를 저장해두어 서버에 반복적으로 요청하는 작업을 줄임.
캐싱(Caching)이 이루어지는 곳.

 

통신 

각종 네트워크 요청을 수행하는 통신파트. 웹서버와의 통신 진행
서버에서 받은 URI에 해당하는 응답 데이터를 렌더링 엔진에게 돌려주는 역할.

 

JS엔진 

자바스크립트 코드를 실행하는 JS엔진.
대표적으로 Chrome V8

 

UI백엔드

사이트 UI 구동 역할

 

브라우저 렌더링 하는 과정 

1. HTML를 파싱해서 DOM tree를 만들고, CSS를 파싱해서 CSSOM을 만든다.

   파싱? 브라우저 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것 

2. DOM tree, CSSOM을 합쳐서 Render Tree를 생성

3. Layout(Reflow) 배치

뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 과정

요소의 크기와 위치가 바뀔 때, resize 시 다시 발생한다. 

4. Paint 화면그리기 

렌더 트리에 포함된 요소들이나 텍스트, 이미지들이 실제픽셀로 그려진다. 

배경 이미지, 텍스트색상 레이아웃의 수치를 변화시키지 않는 스타일이 변경되었을 때 다시 발생 

 

 

참고 

https://velog.io/@grinding_hannah/Web-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%9E%91%EB%8F%99-%EC%9B%90%EB%A6%AC