브라우저

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI에 의해 정해진다.

브라우저의 기본 구조

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

렌더링 엔진

파이어폭스는 게코 엔진을 사용하며, 사파리는 웹킷, 크롬은 블링크 엔진을 사용한다.

웹킷은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진이다.

 

렌더링 엔진의 동작과정은 다음과 같다.

파싱 : HTML 요청이 있을경우, HTML과 CSS를 파싱함.

렌더 트리 구축 : Node트리(DOM 트리) 생성. CSS 파일과 함께 스타일 요소도 파싱

렌더 트리 배치 (레이아웃 생성) : 뷰포트(디스플레이) 크기에 맞게 레이아웃 결정

렌더 트리 그리기 (페인팅) : 눈에 보이는 내용을 픽셀로 변환해서 브라우저에 표시함

 

---

참고

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

https://youtu.be/hITJM_t1WWY