[Week6] 브라우저 동작 원리
2024년 11월 23일
브라우저란?
- 웹페이지(HTML 문서)를 요청하고, 해석하고, 화면에 렌더링해 사용자에게 보여주는 클라이언트 애플리케이션
- ex) 크롬,사파리 등등
브라우저의 주요 구성 요소
| 구성 요소 | 설명 |
| 사용자 인터페이스(UI) | 주소창, 뒤로가기 버튼, 북마크 등 사용자와 상호작용하는 부분 |
| 브라우저 엔진 | 렌더링 엔진과 UI 간 연결 다리 역할 |
| 렌더링 엔진(Rendering Engine) | HTML, CSS를 파싱하고, 시각적 결과로 렌더링 |
| 통신 모듈 | HTTP, HTTPS 요청을 처리 (네트워크 계층) |
| 자바스크립트 엔진 | JS 코드 파싱 및 실행. 예: V8(Chrome), SpiderMonkey(Firefox) |
| UI 백엔드 | 렌더링 결과를 실제 OS의 UI 시스템으로 전달 |
| 데이터 저장소 | 쿠키, 로컬스토리지, 세션스토리지, IndexedDB 등 저장 기능 제공 |
브라우저 동작 원리
- URL 입력
- DNS 조회
- 입력된 도메인을 IP주소로 변환
- 서버에 요청 (HTTP/HTTPS)
- 브라우저는 해당 서버로 HTML 파일 요청
- 서버 응답 수신
- HTML, CSS, JS, 이미지 등의 리소스를 수신
- HTML 파싱
- HTML 문서를 파싱하면서 DOM트리 생성
- CSS 파싱
- CSS 파일을 파싱해 CSSOM 트리 생성
- 렌더 트리 구성
- DOM + CSSSOM → 렌더 트리 생성
- 레이아웃 계산
- 각 노드의 위치, 크기 등을 계산
- 페인팅
- 계산된 스타일을 기반으로 픽셀을 하면에 그림
- 스크립트 실행(JS)
- <script> 태그에 의해 JS가 실행
- DOM조작, 이벤트 핸들링 등 수행