Browser

브라우저란

웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어

EX) Chrome, Safari, IE 등등

주요 기능

1. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것

2. HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다.

구조

• User Interface: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
• Browser Engine: User Interface와 Rendering Engine 사이의 동작을 제어
• Rendering Engine: 요청한 콘텐츠를 표시, HTML을 요청하면 HTML과 CSS를 파싱 하여 화면에 표시함
• Networking: HTTP 요청과 같은 네트워크 호출에 사용됨
• Javascript Interpreter(또는 Engine): 자바스크립트 코드를 해석하고 실행함. 크롬에서는 V8 엔진을 사용함
• Display Backend: 기본적인 위젯(콤보 박스 등..)을 그림
• Data Persistence: Local Storage, 쿠키 등 클라이언트 사이드에서 데이터를 저장하는 영역

렌더링

브라우저가 HTML 파일을 해석할 때 사용하는 기능이다. 이러한 기능은 렌더링 엔진을 통해 진행하게 된다.

브라우저 별 렌더링 엔진

• Chrome의 렌더링 엔진은 V8로 바뀌었고 이 V8을 통해 브라우저 밖에서도 Javascript를 사용할 수 있게 됐으며 이게 node js다

렌더링 순서

1. HTML 파일을 해석해서 HTML과 CSS를 파싱한다.

2. 그 후 렌더 트리를 구축한다.

3. 구축된 렌더 트리를 배치한다.

4. 렌더 트리에 맞게 그린다.

렌더링 자세한 동작 과정은 생략한다. 나중에 필요하면 더 해야지

출처 :
Beomy 블로그
네이버 기술 블로그