본문 바로가기

백엔드 개발자 로드맵/1. 인터넷

3. 브라우저와 그 작동 원리

1) 브라우저 정의

- 웹 서버에서 쌍방향 통신하는 HTML 문서나 파일과 연동하고 출력하는 응용 소프트웨어

 

2) 브라우저 주요 기능

- 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것

- 자원의 종류 

  • HTML
  • CSS
  • JavaScript
  • PDF
  • Image
  • 기타 등등

3) 브라우저의 기본 구조

  1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
  2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
  3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
  4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
  5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
  6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
  7. 자료 저장소 - Cookie, Local storage등 local에 data를 저장하는 영역.

 

4) 렌더링 엔진

- 역할 : 요청 받은 내용을 브라우저 화면에 표시하는 역할

- 종류 : 웹킷(Webkit, 사파리에서 사용), 게코(Gecko, 파이어폭스에서 사용) 등..

 

5) 렌터링 엔진 동작 과정

  1. DOM 트리 구축 위한 HTML 파싱
  2. 렌더 트리 구축
  3. 렌더 트리 배치
  4. 렌더 트리 그리기

 

 

참고 :

https://d2.naver.com/helloworld/59361

'백엔드 개발자 로드맵 > 1. 인터넷' 카테고리의 다른 글

6. 호스팅이란?  (0) 2022.03.21
5. 도메인 이름이란?  (0) 2022.03.17
4. DNS와 그 작동 원리  (0) 2022.03.17
2. HTTP란?  (0) 2022.03.14
1. 인터넷의 작동 원리  (0) 2022.03.14