[Internet] Browsers and how they work?

브라우저

사용자가 인터넷을 사용할 수 있도록 인터넷 연결을 돕는 프로그램입니다.

 

브라우저 종류

• 파이어폭스
  모질라에서 만든 브라우저입니다. 보안도 좋고, 신뢰도도 높습니다.
• 크롬
  구글에서 만든 브라우저입니다. 웹 브라우저 중에서 제일 많이 사용되는 브라우저입니다.
• 마이크로소프트 엣지
  마이크로소프트에서 만든 브라우저입니다. 인터넷 익스플로러라는 브라우저가 엣지로 발전하였습니다.

 

브라우저 주요 기능

사용자가 선택한 자원을 서버에 요청하고 서버에게 받은 데이터를 브라우저에 표시합니다. 자원은 보통 HTML 문서이지만 PDF나 이미지 또는 다른 형태일 수도 있습니다. 자원의 주소는 URL(Uniform Resource Identifier)에 의해 정해진다.

 

브라우저의 기본 구조

• 사용자 인터페이스
  주소 표시줄, 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분을 말합니다.
• 브라우저 엔진
  사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
• 렌더링 엔진
  요청한 콘텐츠를 표시합니다. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시합니다.
  통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데 무서의 내용은 보통 8KB단위로 전송됩니다.
  HTML 문서를 파싱하고 내부에서 태그를 DOM 노드로 변환합니다. 그 다음 CSS 파일과 함께 포함된 스타일 요소도 파싱합니다. 렌더트리에 HTML 정보와 스타일 요소를 저장합니다.
• 통신
  HTTP 요청과 같은 네트워크 호출에 사용됩니다. 통신은 플랫폼 독립적인 인터페이스이고, 각 플랫폼 하부에서 실행됩니다.
• UI 백엔드
  콤보 박스와 창 같은 기본적인 장치를 화면에 표시합니다.
  렌더 트리가 생성되 후 배치가 시작되는데 UI 백엔드에서 렌더 트리의 각 노드의 형상을 만들어 냅니다.
• 자바스크립트 해석기
  자바스크립트 코드를 해석하고 실행합니다.
• 자료 저장소
  자료를 저장하는 곳입니다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 저장할 때 사용됩니다.

 

브라우저 동작 과정

1. DOM 트리 구축을 위한 HTML 파싱
   브라우저는 서버로부터 HTML 문서를 모두 전달 받습니다.
   렌더링 엔진은 전달받은 HTML 문서를 파싱해서 DOM 트리를 구축합니다.
   외부 CSS파일과 스타일 요소도 함께 파싱합니다.
2. 렌더 트리 구축
   DOM 트리와 스타일 정보를 합쳐서 렌더 트리를 만듭니다.
3. 렌더 트리 배치
   렌더 트리의 각 노드에 대한 정보를 화면 상에서 어디에 배치할 지 결정합니다.
4. 렌더 트리 그리기
   UI 백엔드에서 렌더 트리의 정보에 따라 화면을 그리고 출력합니다.

 

[참고]

1. 인터넷, 크롬, 브라우저 뜻? 차이와 사용 - @dockyvche

2. 인터넷 웹 브라우저 종류와 장단점 - All Programmer

3. 브라우저는 어떻게 동작하는가? - Naver D2

4. 웹 브라우저의 동작원리를 알아보자 - thyoondev.log