브라우저 동작 원리
브라우저 주소창에 https://google.com 등 다양한 URL를 입력하면 해당 웹 페이지에 접속된다.
어떤 동작 원리로 페이지에 접속하는 걸까? 이번 글을 통해 알아보자
웹 브라우저와 웹 서버의 통신 과정
클라이언트가 페이지 URL 입력 -> DNS에서 도메인을 IP 주소로 변환 -> IP 주소로 웹 서버 연결 -> URL에 해당하는 웹 페이지 요청 -> 서버가 응답
도메인
각 컴퓨터는 IP 주소를 갖고 있다. 근데 IP 주소는 192.168.0.1과 같은 숫자들로 구성되어 있어 외우기 쉽지 않다 그래서 IP 주소 대신에 naver.com과 같이 사람들이 기억하기 쉽게 도메인 이름을 사용한다.
DNS
웹 브라우저와 웹 서버는 IP 주소를 이용하여 연결하기 때문에 도메인이름을 다시 IP 주소로 변환할 필요가 있는데 이때 사용하는 것이 DNS(Domain Name Server)이다. 웹 브라우저에 URL를 입력하면 웹 브라우저는 도메인 이름에 해당하는 IP 주소를 DNS에 요청하고 DNS는 IP 주소를 응답한다.
브라우저란?
웹 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript를 해석하여 내용을 화면을 보여주는 응용 소프트웨어이다.
동기적인 이유
웹 브라우저가 웹 서버에 필요한 자원(HTML...)을 요청하면 서버는 응답하고 웹 브라우저는 이를 해석한 후 클라이언트에게 보여준다.
브라우저의 기본 구조
1. 사용자 인터페이스
사용자가 접근할 수 있는 영역. 주소 표시줄, 이전/다음 버튼, 북마크, 새로고침 등 요청한 페이지를 보여주는 창을 제외한 모든 부분이다.
2. 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 수행
3. 렌더링 엔진
웹 서버로부터 응답 받은 자원을 웹 브라우저 화면에 표시해주는 역할을 한다.
4. 통신
HTTP 요청과 같이 서버와 통신하게 하는 네트워크 호출에 사용된다.
5. UI 백엔드
select, input 등 기본적인 위젯을 그리는 인터페이스다.
6 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행한다.
7. 자료 저장소
Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용해 저장하는 영역이다.
렌더링 엔진 동작 과정
렌더링 엔진은 서버로부터 응답받은 HTML 문서를 얻는 것으로 시작한다.
1. 렌더링 엔진의 기본적인 동작 과정
- 렌더링 엔진은 HTML 문서를 파싱해 DOM(Document Object Model)트리를 구축한다.
- 외부 CSS 파일과 함께 포함된 스타일 요소 파싱한다.
- DOM트리와 2번의 결과물을 합쳐 렌더 트리를 구축한다.
- 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정한다.
- UI 백엔드에서 렌더 트리의 각 노드를 그린다.
2. 웹킷 엔진의 동작 과정
순서는 위의 기본 동작 과정과 유사하다.
1. HTML 문서를 파싱해 DOM(Document Object Model)트리를 구축한다.
브라우저는 서버로부터 HTML 문서를 전달받고 HTML 파서를 통해 파싱하고 파싱트리를 생성한다. 이를 기반으로 DOM 트리를 생선한다.
<html>
<body>
<p>Hello World</p>
<div><img src="example.png" /></div>
</body>
</html>위의 코드는 아래와 같은 DOM 트리로 변환된다.
2. CSSOM(Css Object Model)를 생성한다.
CSS 파일은 스타일 시트 객체로 파싱 되고 각 객체는 CSS 규칙을 포함한다. CSS 규칙 객체(CSSOM)는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다.
3. 렌더 트리(DOM, CSSOM)를 생성한다.
DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성한다. 렌더 트리는 문서를 시각적인 구성 요소로 만들어주는 역할이다.
웹킷은 이 구성 요소를 렌더러(rendere) 또는 렌더 객체(render object)라는 용어를 사용한다. 렌더러는 자신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있다.
렌더러는 1:1로 대응하는 관계는 아니다 그 이유는 <head>, display: 'none'과 같은 사용자가 볼 수 없는 DOM 요소는 렌더 트리에 추가되지 않는다.
4. 렌더 트리를 배치한다. (레이아웃)
렌더 트리를 생성했으면 렌더 트리를 배치한다.
어느 공간에 위치해야 할지 각각 객체들에게 위치와 크기를 결정한다.
5. 렌더 트리를 그린다.
렌더 트리를 배치(레이아웃 구성)했으면 렌더 트리를 그린다.
이때 UI 백엔드가 동작해서 그리게 된다.
> 그렇다면 자바스크립트는??
이태까지의 설명은 HTML 문서를 파싱해 HTML과 CSS를 렌더링 엔진에서 처리하는 과정이었다. 이 과정만 있어도 웹 페이지를 화면에 나타내는 것은 충분하다. 하지만 Javascript는 어떻게 처리가 될까?
자바스크립트 엔진
HTML 파서는 <script> 태그를 만나면 javascript 코드를 실행하기 위해서 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘긴다.
자바스크립트 엔진은 <script> 태그내의 코드를 로드하고 파싱 하여 실행한다. javascript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨 중지했던 시점으로 돌아가 DOM 생성을 재개한다.
이처럼 브라우저는 동기적으로 HTML, CSS, Javascript를 처리한다. 하지만 자바스크립트 엔진에 제어 권한이 있을 때 Javascript 코드가 완성되지 않은 DOM을 조작하게 된다면 어떻게 될까? 당연히 에러가 발생할 것이다.
이것이 HTML 파일에서 Javascript 코드를 태그 하단에 위치시키는 이유이다.
참고한 글
