브라우저의 동작 원리 이해하기

박채윤·2024년 8월 7일

들어가면서...

좋은 웹 경험은 빠른 로드, 페이지와 원활한 interaction에 의해 결정된다.
브라우저의 동작원리를 이해하는 것은 개발자가 위의 두 가지 목표를 이루는 것을 도와줄 것이다.

탐색은 웹페이지를 로딩하는 첫 단계이다. 사용자는 URL을 입력하거나 링크를 클릭하는 동작을 함으로써 페이지를 이동, 로드하게 된다.

우리는 웹페이지를 사용할때 주소창에 사이트의 URL을 입력하고 페이지를 이동한다.
이때 사용하는 URL은 예를들어 다음과 같은 형식으로 입력한다.

www.go-to-page.com

text로 된 주소를 입력하면 해당 페이지로 이동 (HTML 로드) 한다.

브라우저는 text로된 주소를 입력받으면 DNS조회를 통해 실제 주소와 일치하는 IP를 찾아서 서버에 여러 자원을 요청하는 방식으로 사용자는 페이지를 볼 수 있게 된다.

DNS란 IP에 이름을 붙혀서 클라이언트 <---> 서버 간의 정보를 매칭시켜주는 시스템이다.

사용자인 우리는 페이지를 이동 할 때 실제 서버주소를 가지고 있는 IP를 사용한다면 굉장히 사용하기 불편할 것이다.

이를 위해 IP주소마다 이름을 붙혀서 사용하는데 이게 DNS의 동작 방식이다.

클라이언트는 기억하기 쉬운 URL로 브라우저에서 요청을 보내고 브라우저는 URL을 입력받아서 해당 URL에 맞는 IP를 찾아서 서버로 자원 요청을 보낸다.

여기서 조금 더 알아보면 효율적인 서버와 클라이언트 측의 소통관계를 도와주기 위해 한번 조회 된 DNS는 설정된 시간만큼 캐싱을 한다.

이전에 사용자가 한번 요청을 보낸 URL이라면 캐싱된 시간동안은 동일한 URL로 DNS조회 요청이온다면 바로 DNS조회요청을 보내는 것이 아닌, 이전에 캐싱한 주소를 그대로 응답해준다고 한다.
이를 통해 조금더 빠른 소통을 도와준다.

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