1. 브라우저란?
브라우저는 사용자가 웹 페이지를 탐색하고 상호작용할 수 있도록 해주는 소프트웨어 애플리케이션입니다.
대표적인 브라우저로는 Chrome, Firefox, Edge, Safari 등이 있습니다.
2. 브라우저의 주요 구성 요소
- UI(User Interface)
- 주소창, 북마크, 뒤로 가기/앞으로 가기 버튼 등 사용자가 직접 상호작용하는 영역
- 브라우저 엔진
- UI와 렌더링 엔진 간의 통신을 관리
- 렌더링 엔진
- HTML, CSS, JavaScript를 해석하여 사용자가 볼 수 있는 웹 페이지로 변환
- Chrome: Blink 엔진
- Firefox: Gecko 엔진
- Safari: WebKit 엔진
- HTML, CSS, JavaScript를 해석하여 사용자가 볼 수 있는 웹 페이지로 변환
- JavaScript 엔진
- JavaScript 코드를 실행
- Chrome: V8 엔진
- Firefox: SpiderMonkey
- Edge: Chakra
- JavaScript 코드를 실행
- 네트워킹
- HTTP/HTTPS 요청을 통해 서버와 통신
- 데이터 저장소
- 쿠키, 세션, 로컬 스토리지 등을 통해 데이터를 로컬에 저장
3. 브라우저의 작동 흐름
1) URL 입력
- 사용자가 주소창에
https://example.com입력 - 브라우저는 입력된 URL을 파싱하여 프로토콜, 도메인, 포트를 분리
2) DNS 조회
- 브라우저가 도메인(
example.com)을 IP 주소로 변환하기 위해 DNS 서버에 조회 요청
3) 서버와 연결
- 브라우저는 IP 주소와 포트를 사용하여 서버에 TCP 연결을 설정
- HTTPS의 경우, 연결 전에 TLS/SSL 핸드셰이크가 진행
4) 요청 전송
- 브라우저는 서버에 HTTP 요청을 전송
예)GET / HTTP/1.1 Host: example.com
5) 서버 응답 수신
- 서버는 요청을 처리하고, HTML, CSS, JavaScript 파일 등의 리소스를 HTTP 응답으로 반환
예)HTTP/1.1 200 OK Content-Type: text/html
6) HTML 파싱 및 DOM 생성
- 브라우저는 HTML을 파싱하여 DOM(Document Object Model)을 생성
- DOM은 웹 페이지의 구조를 트리 형태로 표현
7) CSS 파싱 및 렌더 트리 생성
- CSS 파일을 파싱하고, DOM과 결합하여 렌더 트리(Render Tree) 생성
- 렌더 트리는 화면에 표시할 요소와 스타일 정보를 포함
8) 레이아웃 계산
- 각 요소의 크기와 위치를 계산하여 배치
9) 페인팅 및 합성
- 화면에 픽셀 단위로 요소를 그려 렌더링
- 브라우저가 GPU를 사용해 최종 화면을 표시
4. JavaScript 처리
- 브라우저는 HTML을 파싱하며
<script>태그를 만나면 JavaScript 엔진에서 스크립트를 실행 - JavaScript 실행은 DOM을 조작하거나 네트워크 요청을 보내는 등의 동적 작업을 수행
5. 브라우저의 비동기 작업
브라우저는 네트워크 요청, DOM 업데이트, JavaScript 실행 등의 작업을 비동기로 처리하여 사용자 경험을 최적화합니다.
- Event Loop: JavaScript에서 비동기 작업을 관리하는 메커니즘
- Callback Queue와 Microtask Queue를 통해 작업이 순차적으로 실행
6. 렌더링 최적화
- CSSOM 블로킹
- CSS 파일 로드가 완료될 때까지 DOM 렌더링이 지연
- JavaScript 블로킹
- JavaScript 실행이 완료될 때까지 DOM 파싱이 중단
- 최적화 방법
- CSS 파일을
<head>에 배치 - JavaScript 파일은
<body>하단에 배치하거나async,defer속성 사용
- CSS 파일을
7. 브라우저의 보안
- Same-Origin Policy
- 다른 출처의 리소스 접근을 제한
- CORS
- 교차 출처 리소스 공유를 허용하기 위한 정책
- Sandbox
- 브라우저가 각 탭을 별도의 프로세스에서 실행해 보안 강화
8. 마무리
브라우저가 작동하는 방식을 이해하면서, 웹 페이지의 성능을 최적화하고 디버깅을 할 때 많은 도움을 받을 수 있었습니다. 특히, 렌더링 과정과 네트워크 요청 흐름을 이해하면 최적화 기법을 적용하거나 병목현상을 해결하는 데 큰 도움이 됩니다.
조급해하지 말고, 흐름을 만들고, 기록하면서 쌓아가자.