웹 브라우저의 동작 원리

PC, 태블릿, 모바일 등 여러 기기로 웹 페이지를 접속한 경험들이 있을 것이다.

주소창에 URL(ex.https://www.naver.com)치고 해당 웹 브라우저 접속하면 어떤 동작원리로 웹 페이지로 접속이 가능할까?

브라우저란?

웹 브라우저는 동기(Synchronous)적으로 (HTML+CSS), Javascript를 해석하여 내용을 화면에 보여주는 응용 소프트웨어이다.

동기적인 이유

HTML 요소들이 script 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.

DOM이 완성되기 전에 script가 DOM을 조작하면 에러가 발생한다.

자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.

웹 브라우저가 웹 서버에 필요한 자원(웹 페이지)을 요청하면 서버는 응답하고 웹 브라우저는 이를 해석한 후 사용자(Client)에게 보여준다. 보통 자원은 HTML 문서지만 PDF, 이미지 등 다양한 형태일 수 있다.

브라우저의 구조

1. 사용자 인터페이스

사용자가 접근할 수 있는 영역으로 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.

2. 브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

3. 렌더링 엔진(가장 중요)

요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함. 브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합합니다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타냅니다.

4. 통신

HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.

5. UI 백엔드

콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

6. 자바스크립트 해석기

자바스크립트 코드를 해석하고 실행.

7. 자료 저장소

이 부분은 자료를 저장하는 계층으로 HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다. Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역입니다.

렌더링 엔진의 동작 과정

렌더링 엔진

렌더링 엔진은 서버로부터 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다.
렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시한다. 그래서 일련의 과정들이 동기적으로 진행되지 않는다.
HTML을 파싱 할 때까지 기다리지 않고 렌더 트리 배치와 그리기 과정을 시작한다.

과정

렌더링 엔진은 서버로부터 응답받은 HTML 문서를 얻는 것으로 시작한다. 이 문서의 내용은 보통 8KB 단위로 전송된다.

아래 그림은 렌더링 엔진의 기본적인 동작 과정이다.

① HTML 문서를 파싱 하여 DOM 노드로 변환한다.
② 그 다음 외부 CSS파일과 함께 포함된 스타일 요소도 파싱한다.
③ DOM 트리와 2번의 결과물(CSSOM)을 합쳐 "렌더 트리"라고 부르는 또 다른 트리를 생성한다.
④ 렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다.
⑤ 다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 "그리기" 과정을 한다.

아래 그림은 렌더링 엔진 중 하나인 웹킷 엔진을 나타낸 그림이다. 위에서 설명한 기본 동작 과정과 유사하다.

① HTML 문서를 파싱 하여 DOM 노드로 변환한다.

서버로부터 HTML 문서를 모두 전달받고 HTML 파서를 통하여 파싱(parsing)하고 파싱 트리를 생성한다.
생성된 파싱 트리를 기반으로 DOM 트리를 생성한다.
DOM은 마크업과 1:1 관계를 성립한다.

<html lang="en">
    <head>
        <title>DOM 이란?</title>
    </head>
    <body>
        <h1>안녕하세요.</h1>
        <P>나이가 어떻게 되시나요?<p>
    </body>
</html>

위의 HTML 코드를 DOM 트리로 변환하면 아래와 같다.

html
 ├── head
 │    └── title
 │         └── DOM 이란?
 └── body
      ├── h1
      │   └── 안녕하세요 서성식입니다.
      └── p
          └── 나이가 어떻게 되시나요?

② CSSOM(Css Object Model)을 생성한다.

위의 그림처럼 CSS 파일은 스타일시트 객체로 파싱되고 각 객체는 CSS 규칙을 포함한다. CSS 규칙 객체(CSSOM)는 선택자와 선언 객체 그리고 CSS문법과 일치하는 다른 객체를 포함한다.

③ 렌더 트리(DOM + CSSOM)를 생성한다.

DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성한다.
브라우저에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합이다.
렌더 트리는 오직 스크린에 그려지는 것으로 구성되어 있기 때문에 DOM과는 다르다.

④ 렌더 트리를 배치한다. (레이아웃)

렌더 트리는 위치와 크기를 가지고 있지 않기 때문에, 어느 공간에 위치해야 할지 각 객체들에게 위치(position)와 크기(size)를 결정해 준다.

⑤ 렌더 트리를 그린다.

렌더 트리가 만들어져 레이아웃이 구성되었으면 UI 백엔드가 동작하여 렌더 트리의 각 객체를 화면의 픽셀(px) 값으로 나타낸다.

자바스크립트

이제까지 HTML 문서를 서버로부터 전달받아 파싱하여 HTML과 CSS를 렌더링 엔진에서 처리하는 과정을 설명했다. 그렇다면 자바스크립트는 어떻게 처리가 될까?

결론부터 말하면

자바스크립트는 렌더링 엔진에서 처리되지 않으며, 자바스크립트 엔진에서 처리한다.

HTML 파서는 <script> 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘긴다. 제어 권한을 넘겨받은 자바스크립트 엔진은 <script> 태그 내의 자바스크립트 코드 또는 src 속성에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다. 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 남겨서 중지했던 시점으로 돌아가 DOM 생성을 재개한다.

이처럼 브라우저는 동기적으로 HTML, CSS, Javascript을 처리한다. 이것은 script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있다는 것을 의미한다. 따라서 script 태그의 위치는 중요한 의미를 갖는다.

예로, 자바스크립트 엔진에 제어 권한이 있을 때 Javascript 코드가 완성되지 않은 DOM을 조작하게 된다면 어떻게 될까요? 당연히 에러가 발생할 것이다.

이것이 Javascript 코드를 <body>태그 하단에 위치시키는 이유이다.

01.브라우저의 동작원리