Home 브라우저의 작동 원리
Post
X

브라우저의 작동 원리

게시 2025/03/01
By Psmin
7 m읽는 시간

브라우저의 작동 원리에 대해 알아보자.

Web Browser

웹 브라우저란 Web Server와 쌍방향 통신하고 HTML, CSS, JS 파일을 해석하여 내용을 보여주는 GUI 기반의 응용 소프트웨어입니다.

  • 주요 기능 사용자가 필요한 자원을 웹 서버에 요청하면 응답을 받아 이를 해석한 후 사용자에게 보여줍니다.

    자원은 HTML 문서, 이미지, PDF 등 다양한 형태이며, 자원의 주소는 URI로 정해집니다.

웹 브라우저의 기본 구조

Web-Browser

  1. 사용자 인터페이스 (UI)
    사용자가 접근할 수 있는 영역입니다.
    주소 표시줄, 이전/ 다음 버튼, 북마크, 홈, 새로고침, 중단 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분을 말합니다.

  2. 브라우저 엔진
    UI와 렌더링 엔진 사이의 동작을 제어합니다.
    Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 수행합니다.

  3. 렌저링 엔진
    Web Server가 응답한 자원을 Web Browser 상에 나타냅니다.
    HTML 문서를 응답받으면 HTML과 CSS를 파싱하여 화면에 표시합니다.

  4. 통신
    HTTP 요청 같은 서버와 통신이 가능하게 해주는 네트워크 호출에 사용됩니다.
    플랫폼의 독립적인 인터페이스로 각 플랫폼 하부에서 실행됩니다.

  5. Javascript 해석기
    JS 코드를 해석하고 실행합니다.

  6. UI 백엔드
    콤보박스, 창 등의 기본적인 위젯을 그립니다.
    플랫폼에 명시되지 않은 일반적인 인터페이스, OS 사용자 인터페이스 체계를 사용합니다.

  7. 자료 저장소 (Data Storage) Cookie, Local Storage 등 Browser memory를 활용하여 저장할 수 있는 영역입니다.

렌더링 엔진

HTML, XML, 이미지 등 요청받은 내용을 Browser에 표시하는 엔진입니다. 각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지도 다르게 보일 수 있습니다.

  • 종류
    • Blink : Chrome, Opera
    • Webkit : 사파리
    • Trident : explorer
    • EdgeHTML : MS Edge

렌더링 엔진 동작 과정

서버로부터 응답받은 HTML 문서를 얻는 것으로 시작합니다.

Rendering-Engine

  1. HTML 문서를 파싱해 DOM 트리를 구축합니다.
  2. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱합니다.
  3. DOM 트리와 2번의 결과물을 함쳐 렌더 트리를 구축합니다.
  4. 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정합니다.
  5. UI 백엔드에서 렌더 트리의 각 노드를 그립니다.

Webkit의 동작 과정

webkit-Engine

  1. HTML 문서를 파싱하여 DOM (Document Object Model) 트리를 구축합니다. ex-html ex-dom

    브라우저는 서버로부터 HTML 문서를 모두 전달받고 HTML 파서를 통하여 파싱(parsing)하고 파싱 트리를 생성하고 생성된 파싱 트리를 기반으로 DOM 트리를 생성합니다.

  2. CSSOM (Css Object Model)을 생성합니다.
    cssom

    CSS 파일은 스타일 시트 객체로 파싱 되고 각 객체는 CSS 규칙을 포함합니다.
    CSSOM는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함합니다.

  3. 렌더 트리 (DOM + CSSOM)를 생성합니다.
    renderer

    브라우저는 DOM 트리를 기반으로 렌더 트리를 생성합니다.
    렌더 트리는 문서를 시각적인 구성 요소로 만들어주는 역할을 합니다.

    Webkit에서는 이 구성 요소를 “렌더러” 또는 “렌더 객체” 라고 말합니다.

    렌더러는 잔신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있습니다.
    렌더러는 DOM 요소에 부합하지만 1:1 대응 관계는 아닙니다.
    head 태그와 display : none 과 같은 사용자가 볼 수 없는 DOM 요소는 렌더 트리에서 제외됩니다.

  4. 렌더 트리를 배치합니다. (Layout)
    렌더 트리를 어느 공간에 위치할 지, 각 객체들의 위치와 크기를 결정합니다.

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

Javascript 엔진

렌더링 엔진에서 HTML과 CSS를 처리하고 Javascript는 자바스크립트 엔진에서 처리합니다.

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

JS 엔진은 JS 파일을 로드하고 파싱하여 실행합니다.
Javascript의 실행이 끝나면 다시 HTML 파서로 제어 권한을 넘겨 다시 DOM을 생성합니다.

DOM이 생성되지 않은 상태에서 DOM을 조작하면 에러가 생깁니다. 따라서, body태그의 마지막 부분에 script 태그를 넣어주는 것이 에러를 방지합니다.

로드 맵

Browser-Total

참조

Knowledge, CS
Browser
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.

Recent Update
Link