웹브라우저

민태영·2023년 9월 26일
post-thumbnail

브라우저란?

인터넷 사이트에 접속할 수 있는 "도구"를 브라우저 혹은 웹브라우저라고 부른다.
한마디로 컴퓨터에 설치되어 있는 하나의 프로그램으로 다운받아 실행하면 주소창을 입력 할 수 있는 도구로서 우리에게 쓰여진다.

브라우저의 종류

  1. 인터넷 익스플로러 (2022년 6월 15일 서비스가 중단)
  2. 마이크로소프트 엣지
  3. 구글 크롬
  4. 모질라 파이어폭스
  5. 애플 사파리
  6. 오페라

등...

브라우저의 기본구조

브라우저마다 조금씩 차이가 있지만 기본적인 구성은 다음과 같다

  • 브라우저UI(User Interface)

    유저가 브라우저와 상호작용하는 접점을 의미
    주소창, 뒤로(앞으로)가기 버튼, 북마크 등 이 있다.

  • 브라우저엔진

    UI와 렌더링엔진 간의 동작을 조작한다.

  • 렌더링엔진

    유저가 요청한 사이트를 가져와서 그려주는 역할을 담당한다.
    HTML, CSS< XML 등을 파싱하고 화면에 출력한다.
    대표적으로 Webkit와 Mozila에서 만든 Gecko가 있다.

  • 네트워크

    브라우저의 요청으로 웹서버에 액세스하여 받은 응답을 해당 브라우저에 표현한다.
    브라우저와 웹서버의 대화다.

  • 자바스크립트 번역기

    자바스크립트 번역기로 코드를 해석하고 실행한다.

  • UI백엔드

    유저가 직접만들지 않은 브라우저가 이미 보유하고 있는 UI들이다.
    UI들을 그려주는 역할을 한다.
    각 브라우저마다 기본 브라우저UI가 다르다.

  • 데이터스토리지

    브라우저의 데이터저장소로 세션이 끊어지면 해당 세션에서 작업하였던 데이터들이 초기화 된다.
    cookie, cache, Service walker, localstorage등이 있다.

렌더링 엔진

HTML 및 XML문서와 이미지를 표시하고 플러그인이나 브라우저 확장 기능을 이용해 PDF나 다른 유형도 표시할 수 있다.

동작과정


통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데
보통 8KB단위로 전송된다.

어테치먼트: HTML과 Style Sheet를 각자 따로 요청 및 파싱 후 합침
렌더트리: DOM트리에 CSS규칙을 적용하여 새로운 렌더트리를 생성

profile
꿈을 꾸는 개발자

0개의 댓글