How does browser work ?
브라우저 (Browser)
오늘날 인터넷을 사용하는 모든 디바이스에서 떼어낼 수 없는 것 중 하나인 브라우저는 HTML 문서와 그림, 멀티미디어 파일 등 월드 와이드 웹(WWW)을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램을 뜻한다. 쉽게 말해 사람들이 월드 와이드 웹에 접근할 수 있도록 해주는 소프트웨어 어플리케이션이라고 할 수 있다. 해당 글에서는 이러한 브라우저가 어떻게 작동되는 지에 대해 알아보도록 하겠습니다.
World Wide Web
인터넷에 연결된 컴퓨터를 이용해 사람들과 정보를 공유할 수 있는 공간을 뜩하는 용어. HTTP 프로토콜을 기반으로 HTML로 작성된 페이지를 웹 브라우저라는 특정한 프로그램으로 읽을 수 있게 하도록 구성되어 있다.
how doew a web browser work ?
브라우저가 어떻게 작동되는 지 알기 전에 브라우저가 어떤 구성을 이루고 있는 지를 알아보겠습니다.
브라우저의 구성
모든 웹 브라우저는 크게 프론트엔드(Front-end)와 백엔드(Back-end)로 나누어져 있다. 이를 다시 세분화하여 사용자인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워킹, 자바스크립트 해석기, UI 벡엔드, 자료 저장소로 나뉜다.
사용자 인터페이스
인터페이스는 사용자와 브라우저가 소통하는 공간이다.주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등을 포함하여 웹 페이지가 표시되는 부분까지 사용자 인터페이스로 칭한다.
작업 표시줄, 이전/다음 버튼 등이 사용자 인터페이스인가 ?
이 글을 보게되는 누군가가 있다면 이에 대한 답글을 남겨주세요. 여기나 MDN 에서는 interface라고 말하지만 Naver에는 제외한 모든 부분을 유저 인터페이스라고 부르네요 하하
브라우저 엔진
브라우저 엔진은 유저 인터페이스와 렌더링 엔진을 연결하여 유저 인터페이스로부터 넘어오는 인풋들을 바탕으로 렌더링 엔진을 관리, 조작한다.
렌더링 엔진
렌더링 엔진은 요청받은 페이지를 브라우저 스크린 상에 보여주는 역할을 수행한다. 예를 들어 HTML를 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.
네트워킹
네트워킹은 인터넷 호출과 보안을 처리한다.
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행
UI 백엔드
셀레그 박스, 인풋, 윈도우, 체크박스 등과 같은 장치를 그리는 역할
자료 저장소
쿠키, 로컬 저장소, 세션, 인덱스 데이터베이스, 웹 SQL, 파일시스템 등 모든 데이터를 저장하는 계층
브라우저 구동 단계
- 웹 브라우저에 URL을 입력합니다
- 브라우저는 DNS를 사용하여 도메인의 IP주소를 찾습니다
- 브라우저는 서버와 연결을 시작합니다
- 웹서버에 HTTP 요청을 보냅니다
- 서버는 요청을 처리하고 HTTP 응답을 보냅니다
- 브라우저는 HTML, 즉 웹 페이지를 렌더링합니다.
구체적 과정
웹 브라우저에 URL을 입력하여 엔터키를 누른 이후의 과정입니다.
DNS 조회
웹 페이지 탐색의 첫 번째 단계는 해당 페이지의 위치를 찾는 것 입니다. 만약 방문한 적이 있는 사이트에로 이동을 하게 된다면 In Server안의 IP주소를 통해 이동합니다. 하지만 방문한 적이 없다면 DNS 조회를 통해 IP 주소를 찾고 이동합니다.
TCP handShake
IP 주소가 알려지면 브라우저는 TCP HandShake 를 통해 서버에 대해 연결을 설정합니다. 이 과정을 통해 서버와 브라우저간 데이터 전송을 위한 설정을 할 수 있습니다.
TLS - 번외
만약 http가 아닌 https라면 TLS를 통해 새로운 암호를 설정하고 실제 데이터 전송을 시작하기 전에 보안 연결이 설정되어 있는 지를 확인ㅇ합니다.
Response
웹 서버에 대한 연결이 설정되면 브라우저는 사용자를 대신하여 초기 HTTP GET 요청을 보냅니다. 이 경우 대부분 HTML 파일은 보냅니다.
파싱
파싱은 어떤 페이지에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다. 브러우저가 네트워크를 통해 수신한 데이터를 DOM 및 CSSOM로 변환하기 위해 취하는 단계. 파싱 결과는 보통 문서 구조를 나타내는 DOM트리, 노드 트리, 파싱 트리, 문법 트리라고 부른다.
렌더링 트리 만들기
파싱으로 생성된 DOM과 CSSOM을 결합하여 렌더 트리를 형성합니다.
레이아웃
렌더링 트리가 생성될 때, 각 렌더 객체가 위치와 크기를 갖게 되는 과정을 레이아웃이라한다.
그리기
레이아웃이 계산된 트리를 화면에 그려집니다.
순서
출처
