웹 브라우저 동작원리, http란?

1. 웹 브라우저 동작원리

입력한 사이트의 서버로부터 index.html을 가져오며 html 파일에 종속된 파일(js, css, image 등)을 만날 때마다 서버로 http request를 보내 받아온다.

필요한 파일들(html,js,css...)을 다운받아 해석(렌더링)하여 사용자에게 보여주는 프로그램(브라우저)

클라이언트의 요청(url)에 따라 응답(response)해주는 프로그램

프론트 서버: 정적 or 동적인 페이지를 응답하기 위한 서버. 웹 구성요소(html, css, js) 응답 등.
- 웹이 비대해지면 서버의 역할 분담, 보안을 위해 WAS 와 프론트 서버로 나누기도 한다.
백엔드 서버: 사용자의 요청을 받았을 때 DB에서 적절한 데이터를 가져와 응답하기 위한 서버

사용자의 목록, 정보 등 중요한 데이터들이 저장된 저장소

주소창에 url(ex: 구글) 입력
구글 서버로 찾아감
*DNS가 연결해줄 곳을 찾음

도메인 이름 시스템(Domain Name System) IP 네트워크에서 사용하는 시스템. 영문/한글 주소를 IP 네트워크에서 찾아갈 수 있는 IP로 변환해줌.
구글 서버에서 HTML 파일을 클라이언트로 보냄.
서버로 부터 받은 HTML(Document Object Model) 파일 파싱 및 DOM Tree 생성 (브라우저 역할)

DOM Tree
CSS 파싱 및 CSSOM(CSS Object Model) Tree 생성

CSSOM Tree
DOM, CSSOM 합쳐 Render Tree 생성

Render Tree

Render Tree에는 실제 화면에 표현되는 노드(요소)들로만 구성됨
ex) display : none 속성이 설정된 요소는 Render Tree를 만드는 과정에서 제외됨
visibility : invisible 속성은 공간은 차지하고 요소가 보이지 않게 하기에 Render Tree에 포함
JavaScript를 만나면? HTML 파서는 JS 코드를 실행하기 위해 파싱 중단
JS 엔진 실행 및 JS 코드 파싱

Hyper Text Transfer Protocol의 약자
인터넷에서 데이터를 주고받을 수 있는 프로토콜(통신규약)
웹에서 모든 데이터 교환의 기초
규칙을 정해두었기 때문에, 모든 프로그램이 이 규칙에 맞춰 개발하여 정보교환을 함
- 클라이언트 ⇒ 서버 : request(요청)
- 서버 → 클라이언트 : respnse(응답)