지수의 블로그

1 분 소요

[TIL]

WEB - 브라우저

브라우저의 주요 기능

브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
자원은 HTML 문서, PDF, 이미지 등이 있다.

브라우저는 웹 표준화 기구(W3C/World Wide Web Consortium)에서 정한 명세에 따라 HTML 파일을 해석해서 표시한다. (예전과는 다르게 대부분의 브라우저가 표준 명세를 따라 호환성이 좋다.)

브라우저의 UI 브라우저의 사용자 인터페이스(User Interface)는 일반적으로

  • URI(Uniform Resourse Idenrifier/자원의 주소)를 입력할 수 있는 주소 표시 줄
  • 이전 버튼과 다음 버튼
  • 북마크
  • 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼

  • 홈 버튼 의 요소를 가지고 있다.

    HTML5 명세는 주소 표시줄, 상태 표시줄, 도구 모음과 같은 일반적인 요소를 제외하고 브라우저의 필수 UI를 정의하지 않았다.

브라우저의 기본 구조

브라우저의 구성 요소

  1. 사용자 인터페이스(UI):

    주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청 페이지 화면을 제외한 모든 나머지 부분.
    브라우저와 사용자가 상호작용 할 수 있는 접점.

  2. 브라우저 엔진:

    사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
    사용자가 주소창에 어떤 요청을 하면 브라우저는 응답을 가져올 수 있도록 렌더링 엔진을 컨트롤한다.

  3. 렌더링 엔진:

    요청한 콘텐츠를 표시(사용자가 요청한 사이트를 그려주는 역할). HTML과 CSS를 파싱해서 화면에 표시해주는 것.
    (Webkit, Gecko가 있고 브라우저마다 다른 엔진을 사용) -> 프론트엔드에는 중요!

  4. 통신:

    HTTP 요청과 같은 네트워크 호출. 인터넷에서 리소스를 가져올 때 사용.

  5. UI 백엔드:

    콤보 박스와 윈도우 창 등 기본적인 내장 UI들을 그려주는 역할.
    브라우저는 여러 OS에서 만들었고, 그 OS의 API들을 사용할 수 있어 Mac, Window 사용 시 각각 기본 브라우저 UI가 달라짐.

  6. 자바스크립트 해석기:

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

  7. 자료 저장소:

    자료를 저장하는 계층. 쿠키, 캐시, 서비스워커, 로컬 스토리지 등 모든 데이터를 저장.

렌더링 엔진

랜더링 엔진 렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시해주는 역할을 한다.

일반적으로는 HTML 문서를 표시하지만, XML, 이미지도 가능하며 플러그인/확장 기능을 통해 PDF 같은 유형의 문서 또한 표시할 수 있다.

렌더링 엔진의 동작 과정 렌더링 엔진은 요청한 문서의 내용을 얻는 것 부터가 시작이다. 그 내용은 통신에서 온다.

동작 과정은 기본적으로 파싱 -> 빌드 -> 배치 -> 페인팅

  • 파싱: HTML 문서를 파싱하고 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환. CSS 파일과 함께 포함된 스타일 요소도 파싱.
  • 빌드: HTML과 CSS를 합쳐 렌더 트리를 생성.
  • 배치: 렌더 트리 생성 완료 시 배치 시작. 각 노드가 화면의 정확한 위치에 표시되는 것.
  • 페인팅: 렌더 트리를 화면에 그림.

렌더링 엔진은 더 나은 UX를 위해 모든 HTML이 파싱될 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.

네트워크에서 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.

[참고 및 출처] https://d2.naver.com/helloworld/59361 https://another-light.tistory.com/42?category=844048

댓글남기기

참고