웹 브라우저는 사용자가 웹사이트를 요청하면 HTML, CSS, JS를 받아서 화면에 웹페이지로 보여주는 프로그램입니다.
단계 | 설명 |
---|---|
1. 주소 입력 및 요청 (URL 입력) | 사용자가 주소창에 URL을 입력하면, 브라우저가 서버에 요청을 보냄 (HTTP 요청) |
2. 응답 수신 | 서버에서 HTML, CSS, JS 등의 파일을 브라우저에 전달 |
3. HTML 파싱 | 브라우저가 HTML 문서를 한 줄씩 해석해서 DOM(Document Object Model)을 생성 |
4. CSS 파싱 | CSS를 해석하여 스타일 규칙을 적용 (CSSOM 생성) |
5. 렌더 트리 생성 | DOM + CSSOM → 렌더 트리(render tree)를 만들고, 어떤 요소를 어떻게 표시할지 결정 |
6. 레이아웃 (Reflow) | 각 요소의 위치와 크기를 계산 |
7. 페인팅 (Paint) | 실제 픽셀로 화면에 그림을 그리는 작업 |
8. 자바스크립트 실행 | JS 파일을 실행하며, 동적 요소를 처리하거나 HTML 구조를 조작 |
9. 사용자와 상호작용 처리 | 클릭, 스크롤 등 이벤트 처리 |
"HTML → DOM 생성 → CSS 적용 → 렌더링 → JS 실행"
→ 이 과정을 빠르게 반복하면서 우리가 보는 웹페이지가 화면에 나타납니다.