우매함의 봉우리를 넘어서며 개발하면서 기록하기

브라우저의 동작 방법

13 Apr 2021 
전세계에서 누구나 가장 많이 사용하는 소프트웨어인 브라우저가 어떻게 동작할까?
브라우저의 주소창에 http://naver.com을 입력했을 때 어떤 과정을 거쳐 내 PC의 브라우저에 네이버 화면이 보이는지 알아보자

들어가기에 앞서

이 글은 파이어폭스, 크롬, 사파리와 같은 오픈소스 브라우저를 예시로 설명할 예정이다.

브라우저의 주요 기능

브라우저의 주요기능은 먼저 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 이때 자원이라 함은 일반적으로 HTML의 형태를 갖고 있는 것이지만 PDF나 이미지, 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Indentifier)에 의해 정해진다.

브라우저는 HTML 파일을 해석할때 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한 HTML과 CSS 명세에 따라 해석한다. 예전에는 브라우저마다 독자적으로 이 명세를 해석하고 확장함으로써 호환성 문제가 있었지만 최근에는 대부분의 브라우저가 이 표준 명세를 따른다.

브라우저마다 사용자 인터페이스는 다르게 구성할 수 있지만 비슷하게 닮아있는 요소들이 있다.

  • URI를 입력할 수 있는 주소 표시줄
  • 이전 버튼과 다음 버튼
  • 북마크
  • 새로고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
  • 홈 버튼 현재 가장 최신 버전은 HTML5이며 아직도 수정이 이뤄지는 부분이 있다.

브라우저의 기본 구조

브라우저 주요 구성 요소

  • 사용자 인터페이스

    주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지의 모든 부분

  • 브라우저 엔진

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

  • 렌더링 엔진

    요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.

  • 통신

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

  • UI 백엔드

    콤보 박스와 같은 기본 장치를 그리는 역할을 하며 플랫폼에서 명시하지 않은 일반적인 인터페이스. OS 사용자 인터페이스 체계를 사용한다.

  • 자바스크립트 해석기

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

  • 자료 저장소

    쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있어 그 자료들을 저장하는 계층. HTML5 명세에서는 브라우저가 지원원하는 웹 데이터베이스가 정의되어 있다.

렌더링

렌더링은 요청받은 내용을 브라우저 화면에 표시하는 작업으로 렌더링 엔진이 이 역할을 맡는다. PDF와 같이 다른 유형도 표시할 수 있지만 HTML 및 XML 문서와 과 이미지를 CSS로 표시해 주는 주된 사용 패턴에 맞추어보자.

렌더링 엔진 종류

  • 크롬, 사파리 : 웹킷(Webkit) 엔진 사용 - 최초의 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진.
  • 파이어폭스 : 게코(Gecko) 엔진 사용

렌더링 엔진 동작과정

렌더링 엔진 동작 과정

1. HTML 문서를 파싱한다.
2. 콘텐츠 트리 내부에서 태그를 모두 DOM 노드로 변환한다.
3. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다. 이 스타일 정보와 HTML 표시 규칙은 렌더 트리라고 부르는 또 다른 트리를 생성한다.
4. 렌더 트리는 정해진 순서대로 화면에 표시되는데 생성 과정이 끝나고 정확한 위치에 표시되는 것을 의미한다.
5. UI 백엔드에서 렌더 트리의 각 노드를 가로지으며 형상을 그리는 과정이 진행.

위의 과정이 HTML 문서를 모두 파싱할 때까지 기다리는 것이 아니라 받아지면서 점진적으로 배치와 그리기 과정을 진행한다. 이때문에 우리가 웹페이지에 접속할 때 한번에 화면이 뜨는 것이 아니라 천천히 하나씩 나오는 이유이다.

웹킷 작동 과정 웹킷

게코 작동 과정 게코

DOM

Document Object Model(문서 객체 모델)의 줄임말로 웹 브라우저가 html 문서를 트리 구조로 인식하는 방식을 이야기한다.

파싱

파싱(parsing)은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것으로 파싱 결과는 문서 구조를 나타내는 노드 트리로 나타낸다. 이 결과 트리를 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라 부른다.

이런 파싱 트리는 HTML 문서의 객체 표현인 DOM 요소로 트리를 표현할 수 있으며 이 트리의 최상위 객체는 문서(Document)이다. DOM 트리 예제

DOM 역시 W3C에 의해 명세가 정해져 있으며 부분적으로 HTML 요소를 설명하기도 한다. 이 DOM 트리로 파싱 과정을 통해 렌더링이 이루어지고 이 레더링 브라우저에 화면이 결과적으로 보이는 것이다.

Related posts