브라우저 구성요소

면접을 보게되면서 많이 질문을 받았던 브라우저 구성요소이다.
제대로 대답하지 못해 아쉬웠는데 이참에 글로 정리를 하면서 정리를 해보았다.

브라우저 요소들

1. 사용자 인터페이스

   브라우저의 UI에 해당하는 부분이다.
   UI는 브라우저의 주소표시줄, 다음 버튼, 홈 버튼 등을 말한다.
   우리는 이 인터페이스를 통해 브라우저 엔진으로 브라우저를 조작한다.

2. 브라우저 엔진

   사용자 UI와 렌더링 엔진의 중개역할을 담당.
   인터페이스를 통해 URL을 입력하면 브라우저 엔진은 렌더링엔진으로 입력값을 요청한다.
   간단히 생각해 사용자 UI는 인터페이스를 담당한다 생각하고 그 실제 기능 수행은 브라우저 엔진이 한다고 생각하면 될 것 같다.

3. 렌더링 엔진

   요청한 URL을 브라우저 엔진으로부터 받아 서버로 요청. 서버로부터 응답을 받아 파싱하고 렌더링해주는 역할을 담당한다.

4. 통신

   브라우저의 네트워크 처리 담당하는 곳.
   렌더링 엔진으로부터 HTTP요청 등을 받아 네트워크 처리 후 응답 전달.

5. 자바스크립트 해석기

   렌더링 엔진으로부터 받은 자바스크립트를 파싱해 해석 한 값을 렌더링 엔진으로 전달.

6. UI 백엔드

   렌더트리를 브라우저에 그리는 역할 담당

7. 자료 저장소

   데이터를 저장해 불 필요한 서버요청을 줄여준다.
   자주 사용되는 데이터를 저장해 요청 시 해당 저장소에서 가져와 불 필요한 서버 요청을 줄일 수 있는 중요한 역할을 한다.

브라우저 렌더링 과정 간단 요약

1. 사용자는 주소표시줄에 URL: naver.com을 입력.

2. 브라우저 엔진은 먼저 자료저장소에 해당 Naver URL에 해당하는 자료를 검색한다.
   URL에 해당하는 자료가 있고 기한이 유효하다면 렌더링 엔진에 전달.

3. 렌더링 엔진은 브라우저에서 가져온 자료(HTML,CSS,JS 등)을 분석.
   동시에 URL 데이터를 통신,자바스크립트 해석기,UI 백엔드로 전파.

4. 렌더링 엔진은 통신 레이어에 URL에 대한 추가 요청이 있다면 요청하고 응답할때까지 기다린다.

5. 응답받은 데이터에서 HTML,CSS는 렌더링 엔진이 파싱
   Js는 자바스크립트 해석기가 파싱한다.

6. 이때 자바스크립트 파싱결과를 토대로 HTML과 CSS로 만들어진 Dom Tree를 조작해 반영한다.

7. 자바스크립트 파싱결과물은 렌더트리로 구성된다.

8. UI 백엔드는 렌더트리를 브라우저 화면에 띄워준다.

https://chanyeong.com/blog/post/43 이미지 출처
https://www.youtube.com/watch?v=oLC_QYPmtS0&t=557s 브라우저 렌더링 과정