[인터넷] 브라우저와 작동원리

 

브라우저란?

 

 

브라우저는 사용자가 인터넷에서

웹페이지를 접근하고 사용할 수 있도록해주는

sw 어플리케이션임

ex) 크롬 , 웨일 , 엣지등

 

 

 

-브라우저 구성요소

 

사용자인터페이스(User Interface)

-사용자가 브라우저랑 상호작용하는 부분

-주소창, 앞/뒤로가기, 북마크 바, 설정 메뉴 등 포함

 

브라우저 엔진(Browes Engine)

-사용자 인터페이스랑 렌더링 엔진간 통신담당

-사용자가 어떤 동작을수행하면 렌더링 엔진에게 전달하고

그 결과를 사용자에게 표시

 

렌더링 엔진(Rendering Engine)

-웹 페이지의 HTML,CSS,JavaScript 코드 파싱하고 화면에 표시

-HTML 코드에서 각 요소를 트리형태로 구성하는 DOM을 생성하고

CSS와 결합해 화면에 렌더링

 

네트워크(Networking)

-브라우저가 웹 서버와 통신할 수 있도록 HTTP. HTTPS와 같은

프로토콜을 사용하여 요청을 보내고 응답받음

 

JavaScript 엔진

-자바스크립트 코드를 실행하는 역할 브라우저에서 동적 웹페이지 제공

ex)V8(구글 크롬과 노드.js), SpiderMonkey(파이어폭스)가 대표적인 자스 엔진

 

UI 백엔드

- 브라우저의 기본UI 요소를 그리는 부분 OS 사용자 인터페이스 요소를 사용

브라우저의 모습과 기능을 구현

 

데이터 저장소(Data Storage)

-브라우저는 쿠키, 로컬 스토리지, 세션 스토리지, IndexeDB와 같은 다양한 방법으로 데이터 저장

-저장소로 웹 사이트가 사용자의 데이터를 유지하고 추적하는데 사용

 

 

 

 

사진 삭제

 

사진 설명을 입력하세요.

-작동과정

 

URL 입력

-사용자가 주소창에 URL을 입력하고

Enter을 누르면 브라우저는 이 URL을 분석하여 어떤 웹서버에

요청을 보내야하는지 결정함

 

DNS 조회

-브라우저는 입력된 URL을 IP주소로 변환하기 위해

DNS(Domain Name System) 조회를 수행

 

 

HTTP 요청

-변환된 IP주솔르 사용해 웹 서버에 HTTP요청을 보냄

사용자가 요청한 리소스 반환하도록 서버에 지시

 

응답수신

-서버는 요청을 처리하고 해당 리소스를

브라우저에 응답으로 보냄

 

렌더링

-브라우저는 수신된 HTML을 파싱하고

css,js해석해서 웹페이지 렌더링

DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성해

이 렌더 트리를 통해 화면에 그림

 

스크립트 실행

-페이지 로딩 중 또는 로딩 후에 js코드 실행하여 동적 요소 처리

 

사용자 상호작용 처리

사용자가 페이지와 상호작용하면

브라우저는 이를 처리하고 새로운 HTTP 요청을 보내거나 js를 실행해

화면에 업데이트함