브라우저의 동작 원리

Selenium과 BeautifulSoup의 동작 원리를 이해하기 위해 작성

---

가장 먼저 HTTP통신에 대해서 알아야 한다.

 

HTTP통신은 Hyper Text Transfer Protocol인데, Hyper Text를 전송하기 위한 프로토콜이라고 할 수 있다.

 

클라이언트가 요청을 보내면 서버가 해당 요청에 대한 응답을 보내는 방식으로, 데이터는 패킷으로 전송한다.

(패킷은 데이터를 일정 크기로 자른 것으로 헤더, 데이터, 트레일러로 구성된다.)

 

서버에서 응답을 보내고 나서 바로 연결을 끊으며,

 

연결을 끊는 순간 클라이언트와 서버와의 통신은 끊기고 상태 정보를 유지하지 않는다.

---

1. 브라우저가 서버로부터 HTML, CSS, JavaScript, 이미지 파일 등을 응답받는다.

 

• 웹 브라우저의 URL을 이용해 DNS서버로 접근해 해당 도메인 네임에 맞는 IP를 검색한다. (이름 해결 과정은 UDP 통신으로 이루어짐)
• 요청하기 위한 HTTP 메시지를 만든다.
• 웹 브라우저와 서버가 TCP 3Way Handshaking 방식으로 연결한다.
• 웹 브라우저가 서버에 HTTP 요청을 보내고, 서버는 받은 HTTP 메세지를 해석해 리소스를 찾아 다시 브라우저로 전송한다.
• 서버는 웹 브라우저와 TCP 4Way Handshaking으로 연결을 해제한다.
• 이미지를 받은 웹 브라우저는 이미지를 띄워 사용자에게 보여준다.

2. HTML, CSS파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. (자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.)

 

• 렌더링이란 개발자가 작성한 문자를 브라우저에서 그래픽 형태로 출력하는 것을 말한다.

3. HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.

 

4. 권한을 넘겨받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드 또는 script 태그의 src attribute에 정의된 자바스크립트 파일을 로드하고 파싱해 실행한다.

 

5. 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 DOM 생성을 재개한다.

 

6. 이 렌더 트리를 기반으로 웹페이지를 표시한다.