브라우저 기초 + 브라우저 작동 원리

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

브라우저란?

 

- 웹 페이지, 이미지, 비디오, 텍스트 등의 콘텐츠를 수신, 송신하고 사용자에게 표현하는 소프트웨어

 

브라우저의 주요 기능

 

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

- 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다.

- 자원의 주소는 URI에 의해 정해진다.

- 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다.

 

우리가 흔히 사용하는 브라우저

 

크롬, 사파리, 엣지, 파이어폭스, 삼성 인터넷, 오페라, 네이버 웨일

 

브라우저 기본 구조

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

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

 

렌더링 엔진

 

요청 받은 내용을 브라우저 화면에 표시하는 일입니다.

 

렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.

 

렌더링 엔진 동작 과정

 

 

1. DOM 트리 구축을 위한 HTML 파싱 : 서버로부터 HTML 문서를 모두 전달받는다. 렌더링 엔진은 전달받은 HTML 문서를 파싱하여 DOM 트리를 구축한다. 그리고 외부 CSS 파일과 스타일 요소도 파싱한다.

(DOM : Document Object Model)

 

2. 렌더 트리 구축 : DOM 트리와 스타일 정보를 합쳐서 렌더 트리를 만든다.

 

3. 렌더 트리 배치 : 렌더 트리의 각 노드에 대해서 화면 상에서 어디에 배치할 지 결정한다.

 

4. 렌더 트리 그리기 : UI 벡엔드에서 렌더 트리를 그리게 되고, 우리가 보는 화면에 출력된다.

 

 

파싱과 렌더 트리 구축

 

파싱이란 코드를 브라우저가 이해할 수 있도록 변환하는 것이다.

HTML의 경우 일반적인 상향식/하향식 파서로는 파싱이 안된다.

 

1. 엄격하지 않은 문법 규칙

2. HTML 오류에 대한 브라우저의 관용

3. 변경에 의한 재파싱

 

브라우저는 HTML을 받아서 어휘와 구문을 분석하여 파싱 트리를 만든다. 이 파싱 트리를 기반으로 DOM 요소와 속성 노드를 가지는 DOM 트리를 생성한다. HTML을 받아서 파싱 트리를 만드는것과 똑같이 CSS를 파싱하여 CSSOM을 생성한다.

 

브라우저는 DOM 트리를 기반으로 렌더 트리를 생성하고, 렌더 트리는 위치와 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 결정해주고, 렌더 트리의 각 노드를 화면에 출력한다.