웹 브라우저 (WEB Browser)

1. 웹 브라우저란?

웹 브라우저는 사용자가 웹 페이지를 탐색하고 상호작용할 수 있도록 도와주는 소프트웨어이다. 예를 들어 Chrome, Safari 등이 있다. 그렇다면 웹 페이지는 어떤 과정을 거쳐 우리 눈에 보이는걸까?

 

2.  웹 브라우저 동작 원리 

1. URL 입력

사용자가 주소창에 URL을 입력하면 브라우저는 이를 해석해 웹 서버의 IP 주소를 알아낸다.

• DNS 요청:
  • URL을 IP 주소로 변환한다. ex) www.google.com → 127.101.~

2. 서버와 통신

브라우저는 서버에 HTTP 요청을 보내고, 서버는 HTML, CSS, JS 파일 등 필요한 리소스를 응답으로 보낸다.

• 요청 방식: GET, POST 등
• 응답 코드: 200, 404 등

3. 렌더링 엔진 작동

서버에서 받은 HTML, CSS, JS 파일을 해석하고 화면에 표시한다. 

1. HTML 파싱 → DOM 트리 생성
   • HTML 파일을 읽어들여 브라우저가 이해할 수 있는 문서 구조(DOM)를 만든다.
2. CSS 파싱 → CSSOM 트리 생성
   • CSS 파일을 읽어 스타일 정보를 만든다.
3. DOM + CSSOM → 렌더 트리 생성
   • 두 트리를 합쳐 화면에 표시할 구조를 만든다.
4. 레이아웃
   • 요소의 위치와 크기를 계산한다.
5. 페인팅
   • 계산된 내용을 픽셀로 변환하여 화면에 그린다.

4. 자바스크립트 실행

HTML 파싱 중 <script> 태그를 만나면 브라우저는 JS 엔진을 호출하여 자바스크립트를 실행한다.