기록공간

브라우저는 어떻게 동작하는가? 본문

Network/Internet

브라우저는 어떻게 동작하는가?

입코딩 2021. 2. 10. 20:23
반응형

우리는 이 블로그를 보는 지금까지도 브라우저를 사용하고 있다. 만약 브라우저가 없었다면 HTTP 프로토콜로 전달받은 HTML과 같은 정보들은 우리가 직접 해석하고 유추해야 했을 것이다. 브라우저는 우리가 필요한 정보를 서버로 부터 전달받아 보기 쉽게 변환하여 화면에 보여주기 때문에 웹을 사용하는데에 없어서는 안될 중요한 도구이다. 그럼 이런 브라우저는 도데체 어떠한 원리로 작동하는 것일까?

 

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서가 기본이지만 이미지와 같은 다른 형태일 수도 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

 

브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석하여 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 최근 브라우저가 이러한 표준 명세를 따르기 때문에 웹 제작의 호환성 문제가 많이 해결되었다. 

 

브라우저는 여러 종류가 있지만 보통 다음 요소들은 서로 닮아있다.

 

  • URI를 입력할 수 있는 주소 표시 줄

  • 이전 버튼과 다음 버튼

  • 북마크

  • 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼

  • 홈 버튼

브라우저의 기본 구조

브라우저의 주요 구성 요소는 다음과 같다.

 

  1. 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

  2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

  3. 렌더링 엔진 : 요청한 컨텐츠를 표시. 

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

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

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

  7. 자료 저장소 : 자료를 저장하는 계층. 쿠키를 저장하는 것처럼 모든 종류 자원을 로컬로 저장하기 위함.

렌더링 엔진

렌더링 엔진은 브라우저의 구조상에서 가장 핵심적인 역할을 담당한다. 렌더링 엔진의 역할을 요청 받은 내용을 브라우저 화면에 표시하는 일이다. 

 

렌더링 엔진은 사용자가 요청해서 웹서버가 응답한 HTML 문서를 HTML과 CSS로 파싱해서 화면을 구성한다. 렌더링 엔진은 여러 개의 인스턴스를 한 번에 구동할 수 있다. 

 

기본적으로 브라우저마다 다른 렌더링 엔진이 사용된다. 인터넷 익스플러로(IE)는 Trident, FireFox는 Gecko, 사파리는 Webkit을 사용한다. 그리고 구글 크롬과 오페라는 Webkit의 일종인 Blink를 사용한다. 

 

렌더링 엔진 작동 방식

렌더링 엔진은 서버로부터 전달받은 HTML 문서를 맨 처음 네트워크 레이어에서 불러온다. 그리고 아래와 같은 기본적인 과정을 거친다. 

 

모든 렌더링 엔진이 이러한 기본과정을 거치며, 세부적인 사항은 렌더링 엔진마다 차이가 있다. 

 

Webkit의 동작 과정
모질라 Gecko의 동작 과정

그림을 보면 알 수 있듯, 렌더링 엔진이 다르더라도 동작 과정은 기본적으로 동일하다는 것을 알 수 있다. 

 

1. DOM 트리 구축을 위한 HTML 파싱

 

렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서(source code)를 파싱하여 각 요소들을 DOM Tree의 각 DOM 노드들로 전환한다. DOM이란 Document Obejct Model의 준말로 마크업 형태의 HTML 문서를 오브젝트  모델의 형태로 바꿔놓은 것이다. HTML 문서의 각 마크업과 DOM의 각 요소는 1:1로 매칭된다.

 

<html>
  <body>
   <p>Hello World</p>
   <div><img src="example.png" /></div>
  </body>
</html>

위와 같은 html 코드가 있다고 가정해보자. 이를 DOM Tree로 전환하게 되면 아래와 같이 구성된다.

 

가장 최상위 태그가 html이므로 HTMLHtmlElement가 루트 노드로 온다. body 태그는 html 영역 안에 있기 때문에 HTMLBodyElement는 HTMLHtmlElement의 자식 노드가 된다. p 태그와 div 태그는 doby 태그 안에 존재하기 때문에 HTMLParagraphElement와 HTMLDivElement는 HTMLBodyElement의 자식 노드들이 된다. 그리고 p와 div 태그 각각 영역에 텍스트 내용(Text)과 이미지 태그가 오기 때문에 각각 리프노드로 Text와 HTMLImageElement가 오게 된다.

 

2. 렌더 트리(Render Tree) 구축

 

HTML 문서들을 파싱하여 DOM Tree를 구축한 이후, 렌더링 엔진은 CSS/Style 데이터를 파싱하고 그 스타일 데이터들로 렌더 트리(Render Tree)를 구축한다. DOM 트리가 웹 상에 나타낼 내용(컨텐츠)를 구성한다면 렌더 트리는 시각적인 요소, 즉, 어떻게 나타낼지 그 스타일을 지정한다.

 

렌더 트리는 색상, 차원 등 시각적인 지침들을 담은 정사각형들로 구성된다. 이 정사각형들은 스크린에 맞는 순서대로 정렬된다. 이 정사각형들을 Renderer라고 불린다.

 

이 Renderer들은 DOM 트리 요소(Element)들에 적용되지만, 1:1 관계가 성립하지는 않는다. 시각적이지 않은 DOM 요소들은 렌더 트리에 삽입될 수 없다. 예를 들이 head 태그 안의 요소들은 화면에 나타나는 값들을 포함하지 않는다. 따라서 어떠한 Renderer도 적용될 수 없다. 

 

3. 렌더 트리 배치

 

이 단계에서는 렌더 트리의 각 노드들에게 스크린의 어느 공간에 위치해야 할지 각각의 값(Position, Size)을 부여하는 작업을 한다. 

 

4. 렌더 트리 그리기

 

렌더 트리 배치 작업이 완료되면 UI 백엔드가 동작하여 각 노드들을 정해진 스타일 및 위치 값대로 화면에 그리게 된다.

 

더 나은 UX(User eXperience, 사용자 경험)를 위해서, 렌더링 엔진은 각 콘텐츠들을 가능한 빨리 스크린에 띄워야 한다. 그렇기 때문에 모든 HTML 요소들을 렌더링 엔진을 통해 한꺼번에 출력하는게 아니라, 일부 요소들 부터 먼저 트리 과정을 거쳐 스크린에 나타내고, 그 와중에 웹의 다른 요소들은 네트워크를 통해 렌더링 엔진으로 읽어들이는 순차적인 방식으로 입출력이 진행된다.

출처 : d2.naver.com/helloworld/59361

 

반응형
저작자표시

'Network > Internet' 카테고리의 다른 글

인터넷은 어떻게 동작하는가?  (0) 2021.02.08
'Network/Internet' Related Articles more
Comments