브라우저의 작동방식

브라우저의 기본 구조

1. 사용자 인터페이스
   • 사용자가 접근할 수 있는 영역으로, URI를 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 새로고침 버튼, 북마크 메뉴 등 페이지를 보여주는 창을 제외한 나머지 모든 부분
2. 브라우저 엔진
   • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
   • Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 한다.
3. 렌더링 엔진
   • 웹 서버로부터 전달받은 자원을 웹 브라우저 상에 나타낸다.
   • 예를 들어, 브라우저가 서버로부터 HTML 문서를 응답 받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합한다. 리 렌더 트리를 기반으로 브라우저가 웹 페이지를 나타낸다.
   • 각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있다.
   • 렌더링 엔진의 동작 과정 정리
     • DOM 트리 구축을 위해 HTML 문서 파싱
     • 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱
     • 위 두 결과물을 합쳐 렌더 트리를 구축
     • 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정
     • UI 백엔드에서 렌더 트리에 각 노드를 그림
4. 통신
   • HTTP 요청과 같은 서버 통신이 가능하게 하는 네트워크 호출에 사용된다.
5. UI 백엔드
   • select, input 등 기본적인 위젯을 그리는 인터페이스
6. 자바 스크립트 해석기
   • 자바 스크립트 코드를 해석하고 실행
7. 자료 저장소
   • Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역

 

정리

브라우저의 동작 원리는 곧 렌더링 엔진의 동작 원리이다. 렌더링 엔진에서 HTML 문서를 파싱해 DOM 트리를 구축하고, 외부 CSS 파일 등 스타일 요소를 파싱해 두 결과물을 합쳐 렌더 트리를 구축한다. 이후 렌더 트리의 각 노드에 대해 화면 상에서 배치할 곳을 결정하고, UI 백엔드에서 렌더 트리에 각 노드를 그리며 동작한다.