🌐 브라우저란?
동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어
🌐 브라우저의 구조
1. 사용자 인터페이스
: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴와 같이 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
2. 브라우저 엔진
: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
3. 렌더링 엔진
: 요청한 콘텐츠를 표시 ➡️ HTML을 요청하면 HTML과 CSS를 파싱해 화면에 표시
HTML 및 XML 문서와 이미지를 표시하고 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시 가능
4. 통신
: HTTP 요청과 같은 네트워크 호출에 사용. 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행
5. UI 백엔드
: 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 인터페이스 체계를 사용
6. 자바스크립트 해석기
: 자바스크립트 코드를 해석하고 실행
7. 자료 저장소
: 자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음
🌐 브라우저 동작 과정
렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작해 문서의 내용은 보통 8KB 단위로 전송된다.
-
HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환 ➡️ CSS 파일과 함께 포함된 스파일 요소도 파싱
-
스타일 정보와 HTML 표시 규칙은 렌더 트리라는 또 다른 트리 생성
: 렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시 -
각 노드가 화면의 정확한 위치에 표시하는 렌더 트리 배치 시작
-
UI 백엔드에서 렌드 트리의 각 노드를 가로지르며 형상을 만들어내는 렌더 트리 그리기
✅ REFERENCE
web.dev : How browsers work Behind the scenes of modern web browsers
thyoondev.log : 웹 브라우저의 동작원리를 알아보자
