[FE] 브라우저 작동 원리

브라우저는 아마 사람들이 가장 많이 사용하는 소프트웨어 중 하나이며, 

이 글을 통해서 어떤 과정을 거쳐 웹 페이지가 화면에 보이게 되는지 알게 될 것입니다. 

 

브라우저의 기본 구조

브라우저의 주요 구성 요소

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

 크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지되어 독립된 프로세스로 처리됩니다. 그럼 주소창에 도메인을 입력하면 어떤 프로세스로 우리가 보는 웹 사이트를 보는 지 크게 2가지 방식으로 나누어서 알아보겠습니다.

 

웹 사이트 동작 과정

서버와의 통신

먼저, 통신을 통해 해당 웹 사이트 서버로 부터 정보를 가져오는 부분입니다.

브라우저로 웹 사이트에 접속할 때 과정

1. 브라우저 주소창에 도메인을 입력합니다.

2. 호스트 캐시를 조회하여 사용자가 입력한 URL 주소중에서 도메인 이름(Domain Name)부분의 IP주소를 확인합니다. 

3. 만약, 없다면 DNS의 Resolver(통신사 별 DNS 서버) 캐시에서 IP주소를 확인합니다. Resolver가 모르는 경우 루트 서버에 질의 하여 IP주소를 반환합니다. 

4. 받아온 IP 주소와 사용자가 입력한 URL 정보(param)로 HTTP 프로토콜을 생성하여 HTTP 요청 메시지를 생성합니다.

5. 생성된 HTTP 요청 메시지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 해당 IP 주소의 컴퓨터(웹 서버)로 전송합니다.

6. 서버에 도착한 HTTP 요청 메시지의 URL  정보에 해당하는 데이터(HTML, CSS, JS)를 서버에서 생성합니다.

7. 생성된 웹 페이지 데이터를 다시 HTTP 프로토콜을 사용하여 HTTP 응답 메시지 등의 Header와 함께 요청한 컴퓨터(PC)로 데이터를 전송합니다.

8. 도착한 HTTP 메시지를 브라우저가 해석하고 웹페이지를 사용자가 볼 수 있게 합니다.

 

브라우저 동작 과정

렌더링 엔진의 역할은 서버로 요청해서 받은 내용을 가지고 브라우저 화면에 표시하는 일을 합니다. 사파리와 크롬은 Webkit 렌더링 엔진을 사용합니다. 렌더링 과정은 다음과 같습니다.

Webkit 동작 과정

1. HTML 파서를 통해서 HTML 마크업을 처리하고 DOM 트리를 빌드합니다.

2. CSS 파서를 통해서 CSSOM 트리를 빌드합니다. 

3. DOM과 CSSOM을 결합하여 렌더링 트리를 형성합니다. 

4. 렌더링 트리에서 배치 메소드를 통해 각 노드의 위치를 계산합니다.

5. 개별 노드를 화면에 렌더링하여 사용자에게 시각화합니다.

 

* DOM(Document Object Model)
: 문서 객체 모델은 HTML 문서의 프로그래밍 interface로 프로그래밍 언어(JS, bs4 ...)가 DOM 구조에 접근 할 수 있는 방법을 제공하며, 문서 구조, 스타일, 내용 변경등을 도와준다.

 

모든 웹 서비스 동작 과정을 기술 한 것은 아니지만, 전체적인 틀에 대해서 이야기 해보았습니다.

네트워크적인 부분, 보안적인 부분 등 더 깊숙히 바라 볼 수 있는 부분들이 많기 때문에 오늘은 전체적인 그림만 그렸다고 할 수 있습니다. 특히 Front-End 개발을 진행할 경우 성능을 지속적으로 높이는 것이 목표시 되기 때문에, 전체적인 구조를 파악하는 것이 매우 중요하다고 볼 수 있습니다.

 

 

[참조 : https://d2.naver.com/helloworld/59361]

[참조 : https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/FrontEnd]