브라우저 동작 과정은 어떻게 될까?

이강윤·2022년 6월 26일
1

브라우저/API

목록 보기
1/5
post-thumbnail

브라우저란?

  • 웹페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어이다.
  • 크롬, 사파리, 엣지 등이 브라우저다.

브라우저의 핵심기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 렌더링 엔진을 통해 텍스트 및 이미지 등으로 변환하여 최종화면을 사용자에게 표시하는 것이다.

브라우저의 기본 구조

브라우저의 주요 구성 요소
1. 사용자 인터페이스

  • 검생창, 새로고침, 뒤로가기/앞으로가기 버튼 등 사용자가 접근할 수 있는 영역

2.브라우저 엔진

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

3.렌더링 엔진

  • 브라우저의 핵심이며 요청한 콘텐츠를 화면에 표시
  • HTML과 CSS등을 해석해서 표시하는 엔진

4.통신

  • HTTP 요청 같은 네트워크 호출에 사용

5.UI 백엔드

  • 콤보 박스와 창 같은 기본적인 장치를 그림
  • 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

6.자바스크립트 해석기

  • 이름 그대로 자바스크립트 코드를 해석하고 실행

7.자료 저장소

  • 자료를 저장하는 계층
  • Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역이다.

렌더링 엔진 동작 과정

렌더링 엔진 동작 과정

  1. 렌더링 엔진이 HTML문서를 파싱하여 DOM 트리를 구축한다.
  2. 그 다음 외부 css파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM트리를 구축한다.
  3. DOM트리와 CSSOM트리를 합쳐 렌더 트리를 구축한다.
  4. 레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산한 뒤 화면에 배치하여 그림을 그려나간다.
profile
멋진 FE개발자가 될거야 ✌

0개의 댓글