[Web] 브라우저 동작 원리
브라우저 동작 원리에 대해서 알아보자
브라우저(Browser)란 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램이다. 우리는 일상생활에서 인터넷을 통해 검색을 할 때 주로 네이버나 구글과 같은 사이트에 접속하여 필요한 정보를 검색한다. 이 때 그러한 사이트에 접속할 수 있는 도구를 브라우저라고 부른다.
그렇다면 웹 서버(Web server)란 무엇일까?
웹 서버는 HTTP 또는 HTTPS를 통해 웹 브라우저에서 요청하는 HTML 문서나 오브젝트(이미지 파일 등)를 전송해주는 서비스 프로그램을 말한다. (소프트웨어) 이러한 기능을 제공하는 컴퓨터 프로그램을 실행하는 컴퓨터 또한 웹 서버라고 부른다. (하드웨어)
웹 페이지가 만들어지는 과정
- HTML Parser가 HTML을 바탕으로 DOM tree를 생성한다.
- CSS Parser가 CSS를 바탕으로 CSSOM tree를 생성한다.
- DOM tree와 CSSOM tree를 결합하여 Render tree를 생성한다.
- Render tree의 각 노드를 화면의 실제 픽셀로 변환하여 화면에 페인팅한다.
DOM과 CSSOM이란?
문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 노드(node)와 오브젝트(object)를 통해 문서를 표현한다. DOM은 웹 페이지의 객체 지향 표현이다. 쉽게 말해 웹 페이지에 대한 인터페이스이다.
index.html
<!doctype html>
<html lang="ko">
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>How are you?</p>
</body>
</html>
HTML Parser는 위와 같은 HTML 코드를 브라우저와 JavaScript가 이해할 수 있는 DOM tree 형태로 바꾸어 준다.
위에 있는 index.html을 DOM으로 추상화한 모습이다. HTML에 있는 tag(<html>, <h1>, <p>…)들은 node를 표현한다. 여기서 주의할 점은 text도 node로 표현된다는 것이다. 위의 그림에서 "My first web page", Hello, world!, How are you?는 text node로 표현되었음을 알 수 있다.
그렇다면 CSSOM은 무엇일까? CSSOM은 DOM에 CSS를 입힌 것을 이야기한다. 다음 예시 코드를 확인해보자.
<!doctype html>
<html lang="ko">
<head>
<title>My first web page</title>
</head>
<body>
<h1 style="display: hidden">Hello, world!</h1>
<p style="display: none">How are you?</p>
</body>
</html>
html
ㄴhead
ㄴtitle
ㄴMy first web page
body
ㄴh1
ㄴHello, world!
DOM tree에는 How are you? text node도 포함되어야 한다. 하지만 CSS에 포함된 display: none 특성 때문에 CSSOM에는 포함되지 않은 것이다. 반면 CSSOM에 Hello, world! text node가 포함되어 있는 것은 화면 상에 페인팅되지는 않지만, 실제 화면에서 공간을 차지하고 있기 떄문이다.
브라우저가 동작하는 방법
브라우저 주소 창에 https://www.naver.com/ 를 입력했을 때 어떻게 동작하는지 알아보자.
- 브라우저를 킨 다음 주소창에 네이버 URL을 입력하고 enter를 누르면 네트워크로 요청을 보낸다.
- 요청은 DNS 서버로 전달되고, DNS 서버에서 URL에 해당하는 IP를 찾아 해당 웹 서버로 요청이 전달된다.
- 웹 서버는 해당 페이지에 존재하는 어려 자원들 (HTML 문서, 이미지 파일 등)을 전송해 준다.
- 자원을 전달 받은 브라우저의 HTML parser는 HTML을 파싱하여 DOM tree를 생성한다.
- CSS parser는 CSS를 파싱하여 CSSOM tree를 생성한다.
- DOM tree와 CSSOM tree를 결합하여 Render tree를 생성한다.
- Render tree의 각 노드를 화면의 실제 픽셀로 변환하여 화면에 페이팅한다.
댓글남기기