Home 브라우저 동작 원리
Post
Cancel

브라우저 동작 원리

Posted Mar 3, 2023 Updated Mar 23, 2023
By Dabisix
15 min read

Intro

브라우저에 url을 입력하면, 어떤 과정을 거쳐 나의 화면에 나타나게 되는가.

클라이언트의 요청을 받기부터 요청 결과를 응답받기까지 웹 브라우저의 동작원리를 알아보자.



Main

1. 브라우저란 ?

인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램

우리가 인터넷을 통해 검색하고자 할때, 크롬이나 사파리등을 통해 접속한다. 이처럼 주소창에 url을 입력받아 원하는 사이트에 접속할수 있는 도구(프로그램)을 브라우저라고 한다.


종류

최근 브라우저의 시장 점유율 순으로, 종류는 다음과 같이 있다.

image [출처 : statcounter] 압도적으로 크롬의 사용률이 높은 것을 알 수 있다. (2023.03.03일 기준)

  1. Google Chrome

    • 구글에서 자사의 검색엔진에 최적화시켜 출시한 웹 브라우저
    • Windows 뿐만 아니라 MAC OS, Linux, 안드로이드 등 지원
    • 빠른 속도에 확장 프로그램 기능, 고급 기능 및 개발자 도구 등의 강력한 기능들을 제공

  2. Apple Safari

    • 애플에서 개발한 애플 자사 제품에 의한 웹 브라우저
    • 애플 MAC OS나 IOS전용으로만 출시되어 폐쇄적인 특성
    • 애플의 자사 제품에서는 메모리 누수가 적고 안정적으로 동작

  3. Microsoft Edge

    • 마이크로소프트에서 개발한 크로뮴 기반 웹 브라우저
    • 크롬에 비해 메모리 사용량이 낮고 빠름
    • 크롬의 확장 프로그램을 가져와서 사용
    • 기본 검색이 구글이 아닌 bing으로 되어있어 호불호 갈림

  4. Mozilla Firefox

    • 모질라에서 만든 Gecko 엔진기반 오픈 소스 웹 브라우저
    • Window, Linux, Mac 등 지원
    • 웹 표준에 가장 잘 호환하는 웹 브라우저 중 하나


주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이 브라우저의 주요기능이다.

자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

브라우저는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다. 대부분의 브라우저가 이 표준 명세를 따르게 되면서, 웹 제작자가 겪던 심각한 호환성 문제가 개선 될 수 있었다.

한가지 재밌는 점은, UI에 대해서는 표준 명세가 없다. 그럼에도 불구하고 수년간 서로의 장점을 모방하다 보니 현재에 이르러 어느정도 비슷해진 것이다. 역시 모방은 창조의 어머니.


2. 브라우저 기본 구조

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

image 사진 출처

  1. 사용자 인터페이스(User Interface) - 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
  2. 브라우저 엔진(Browser Engine) - 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
  3. 렌더링 엔진(Rendering Engine) - 요청하여 웹서버로부터 응답 받은 내용을 UI 상에 표시
  4. 네트워킹(Networking) - HTTP 요청과 같은 네트워크 호출에 사용. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
  5. 자바스크립트 해석기(Javascript Interpreter) - 자바스크립트 코드를 해석하고 실행.
  6. UI 백엔드(UI Backend) - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
  7. 자료 저장소(Data Persistence, Data Storage) - 자료를 저장하는 계층. 쿠키와 같은 로컬 데이터 저장

여기서 렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.

렌더링 엔진에 대해 알아보며 브라우저의 동작 과정을 살펴보자.


3. 렌더링 엔진

렌더링 엔진이란 ?

사용자가 요청해서 웹서버가 응답한 HTML 문서를 HTML과 CSS로 파싱해서 화면을 구성

  • 렌더링 엔진은 HTML이외에도 XML, 이미지, PDF 등 여러 유형을 표시할 수 있다.
  • 여러개의 인스턴스를 한번에 구동할 수 있다.
  • 특히 크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지할 수 있어 각 탭이 독립된 프로세스로 처리된다.

  • 브라우저 별 사용 엔진

    • IE(Internet Explorer) : Trident
    • FireFox : Gecko
    • Safari : Webkit
    • chrome, opera : Webkit의 일종인 Blink

      💡 Webkit : 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진인데,
      애플이 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정


렌더링 엔진 동작 방식

렌더링 엔진은 웹서버로부터 전달받은 HTML 문서를 맨 처음 네트워크 레이어에서 불러온 후 다음과 같은 과정을 거쳐 화면에 요청 결과를 나타내게 된다.

image 사진 출처


렌더링 엔진 동작 순서

  1. HTML 파싱 후 DOM 트리 만들기
  2. 렌더 트리(Render Tree) 만들기
  3. 렌더 트리(Render Tree) 레이아웃 만들기
  4. 렌더 트리 페인팅(Render Tree Painting)


  1. DOM 트리 생성

    네트워크 레이어를 통해 전달받은 HTML 문서를 파싱하여 각 요소들을 DOM Tree의 각 DOM 노드들로 전환한다.

    💡 DOM(Document Object Model) : 마크업 형태의 HTML 문서를 오브젝트 모델의 형태로 바꿔놓은 것으로, 트리 형식의 자료구조로 이루어져 있다. HTML의 태그 형식을 생각하면 쉽다!

    쉽게 말해, 웹 브라우저가 HTML 페이지를 인식하는 방식이다.

  2. 렌더 트리 구축

    CSS/STYLE 데이터를 파싱하고 그 스타일 데이터들로 렌더 트리(Render Tree)를 만든다.

    💡 DOM Tree와의 차이점

    • DOM Tree : 웹 상에 나타날 내용을 구성
    • Render Tree : 시각적 요소 구성. 즉, 어떻게 나타날지 스타일등을 지정함

    image DOM Tree(좌측)와 Render Tree(우측)

    상단 이미지를 보면 알겠지만, 렌더트리를 구성하는 Renderer(핑크색박스)들은 DOM Tree의 요소(태그)들에 적용되지만, 1:1관계로만 적용되진 않는다.

    또한, <head>태그와 같은 시각적이지 않은 DOM 요소들은 렌더 트리에 삽입될 수 없다.

  3. 렌더 트리 배치

    레이아웃을 만드는 과정으로, 각 노드들에게 화면의 어느 공간에 위치해야 할지 각각의 값을 부여한다.

  4. 렌더 트리 그리기

    UI 백앤드가 동작하여 각 노드들을 정해진 스타일 및 위치값대로 화면에 배치한다.



순차적으로 입출력 진행

여기서 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하고자, 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하게 되는 것이다.


렌더링 엔진 간 미묘한 차이

전체적인 흐름은 위와 동일하지만, 엔진별로 개발 진척도나 별도 규칙에 따라 지원하는 표준이 다르거나, 미세하게 렌더링 알고리즘이 다르다. 이로 인해 개발자가 의도하지 않은 방향으로 웹 페이지가 동작하게 되는 상황이 생기는 것이다. 저희 웹은 크롬에서만 써주세요,,


4. 자바스크립트 엔진

HTML과 CSS는 렌더링 엔진에 의해 파싱되지만, Javascript는 자바스크립트 엔진이 처리한다.

자바스크립트 코드 실행 과정을 살펴보자.


  1. 자바스크립트 엔진으로 제어 권한 전달

    HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.

  2. 자바스크립트 코드 파싱 및 실행

    자바스크립트 엔진이 script 태그 내의 자바스크립트 코드 또는 script 태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다.

  3. DOM 생성 재개

    실행이 끝나면 HTML 파서로 제어 권한을 넘겨주고, 브라우저가 중지했던 시점부터 DOM 생성을 재개한다.


이처럼 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript을 처리하기에, script 태그의 위치는 중요한 의미를 갖는다.

습관적으로 body보다 아래에 script 코드를 넣던 것은, 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있기 때문이었다.


body 요소의 가장 아래에 자바스크립트를 위치시켜야 할 이유

  1. 페이지 로딩 시간 단축

    HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않게된다.

  2. 에러 발생 방지

    DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.


image 위 모든 과정을 한번에 정리한 이미지

Outro

요약 정리

브라우저 동작 원리

  1. 네트워크 레이어를 통해 HTML 전달받아 읽기 (로드)
  2. HTML 파싱 (DOM Tree & CSSOM 생성 + 스크립트파싱)
  3. 렌더 트리 생성
  4. 노드들 화면에 배치 (레이아웃 만들기)
  5. UI백엔드가 렌더트리 그림



How browsers work

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

브라우저의 작동 원리

PoiemaWeb

Web, WebEtc
browser rendering
This post is licensed under CC BY 4.0 by the author.
Recently Updated
Contents